css - Angular 2+ - 根据路线更改 css

Question

我正在尝试在 Angular (v2.4.5) 中构建选项卡菜单。根据路线激活一个选项卡。

例如我有这条路线:

const routes: Routes = [
  {
    path: 'tab1',
    component: Tab1Component,
  },
  {
    path: 'tab2',
    component: Tab2Component,
  }
];

如果用户输入地址 http://localhost/tab2 我想要突出显示 tab2(更改标签 css)。

实现此目标的最佳方法是什么？

Answer 1

RouterLinkActive

Lets you add a CSS class to an element when the link's route becomes active.

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

您可以将 RouterLinkActive 实例分配给模板变量并直接检查 isActive 状态:

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html