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

允许您在链接的路由变为活动时向元素添加CSS类.

<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>