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>

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

Answer 2

在您的链接上使用routerLinkActive="active"，您将拥有以下内容：

<nav>
      <a routerLink="/tab1" routerLinkActive="active">TAB 1</a>
      <a routerLink="/tab2" routerLinkActive="active">TAB 2</a>
</nav>

在您的CSS中，您将为导航链接添加active课程：

nav {
   color: black;
}
nav .active {
   color: orange;
}

有关路线here的更多信息。