Question

我试图通过给它改变某些样式的类来区分当前选择的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类。

有人知道如何让它发挥作用？

Answer 1

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

你只需要在routerLink上使用routerLinkActive prop。

Answer 2

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

＆＃39; angular＆＃39;路由器知道哪条路由处于活动状态，并为您设置活动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>

Answer 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

Angular5，为RouterLink设置活动类

3 个答案: