Angular5，为RouterLink设置活动类答案

【问题标题】：Angular5, setting active class for RouterLinkAngular5，为RouterLink设置活动类
【发布时间】：2018-08-24 07:09:00
【问题描述】：

我试图通过给它一个会改变一些样式的类来区分当前选择的 routerLink。

所以在 html 中我向链接添加了一些属性和事件。

app.component.html：

<nav class="nav-list">
  <a routerLink="/dashboard" 
     class="nav-link" 
     [class.activePage]="pageSelected === 'dashboard'" 
     (click)="setActivePage('dashborad')" >
     Dashboard</a>
  <a routerLink="/products" 
     class="nav-link" 
     [class.activePage]="pageSelected === 'products'" 
     (click)="setActivePage('products')" >
  Products List</a>
</nav>

在打字稿中我已经实现了变量和方法。

app.component.ts：

import { Component } from '@angular/core';


@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) 
  export class AppComponent {

  pageSelected:string;

  setActivepage(page){
    this.pageSelected = page;   }

}

但是虽然activePage类已经在样式中设置了，但是点击链接后什么也没有发生。

有人知道如何让它工作吗？

【问题讨论】：

看到这个angular.io/api/router/RouterLinkActive#routerlinkactive

标签： angular

【解决方案1】：

@vikas 和@Mertcan Diken 已经向您展示了解决方案！我告诉你应该如何使用它。

'angular' 路由器知道哪个路由是活动的，并会为你在活动的a 标签上设置一个类。您只需定义应设置的类。

.css

.active-route {
    background: black;
    border-bottom: 2px solid red;      
}

.html

<nav class="nav-list">
    <a routerLink="/dashboard" routerLinkActive="active-route" class="nav-link" >Dashboard</a>
    <a routerLink="/products" routerLinkActive="active-route" class="nav-link">Products List</a>
</nav>

【讨论】：

【解决方案2】：

https://angular.io/api/router/RouterLinkActive

你只需要在你的 routerLink 上使用 routerLinkActive 属性。

【讨论】：

【解决方案3】：

<nav class="nav-list">
  <a routerLink="/dashboard" 
     class="nav-link" 
     routerLinkActive="activeClass"
     (click)="setActivePage('dashborad')" >
     Dashboard</a>
  <a routerLink="/products" 
     class="nav-link" 
     routerLinkActive="activeClass"
     (click)="setActivePage('products')" >
  Products List</a>
</nav

【讨论】：

您不知道如何使用“routerLinkActive”。删除你的答案。