Angular 2+ - 根据路由改变CSS

Question

我将尝试在 Angular (v2.4.5) 中构建一个选项卡菜单。选项卡的激活状态基于路由。

例如，我有以下路由：

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

如果用户输入地址http://localhost/tab2，我希望tab2被突出显示（更改选项卡的CSS）。

如何实现最佳方法？

- Doua Beri

---

也许可以类似于https://dev59.com/JFkT5IYBdhLWcg3wa-xz#38652281。 - Günter Zöchbauer

你尝试过在选项卡链接上使用 routerLinkActive 指令吗？例如 <a routerLink="tab2" routerLinkActive="active">Tab2</a>。你需要传递给该指令的是一个 CSS 类名，如果当前路由与链接匹配，则该类将被添加到链接中。 - AngularChef

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

- VadimB

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

更多关于路由的信息请参阅此处。

- Francisco Cabral