角度2+；-基于路由更改css

我正在尝试在Angular（v2.4.5）中构建一个选项卡菜单。选项卡根据管线处于活动状态

例如，我有以下路线：

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

如果用户输入地址

http://localhost/tab2

我希望突出显示

选项卡2

（更改选项卡css）

---

实现这一点的最佳方法是什么？

在您的链接上使用

routerLinkActive=“active”

，您将获得如下内容：

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

---

有关路线的详细信息。

RouterLinkActive

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

---

可能与您尝试在选项卡链接上使用
routerLinkActive
指令类似？即
Tab2
。传递给此指令的是CSS类的名称，如果该类与当前路由匹配，则将添加到链接中。
nav {
   color: black;
}
nav .active {
   color: orange;
}

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

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