将 CSS 应用于活动路由器链接 [Angular 2]

Posted 2023-02-22

【中文标题】将 CSS 应用于活动路由器链接 [Angular 2]

【英文标题】：Apply CSS to active router link [Angular 2]

【发布时间】：2016-11-19 00:59:08

【问题描述】：

我想将特殊的 CSS 样式属性应用于活动路由器链接：

<a [routerLink]='link'>name</a>

这是我目前尝试过的（使用默认的 router-link-active 类）：

.router-link-active 
	color: #000;
	font-weight: bold;

它不起作用，我真的不明白为什么。

【问题讨论】：

我不认为它实际上是重复的；另一个问题是关于 Angular 1，而这是 angular2，而 angular2 的路由器是从 angular1 中删除的几个版本。

【参考方案1】：

目前 Angular 2 有一个 built in attribute，你可以在任何与 [routerLink] 一起使用的链接上使用它，它是 routerLinkActive，所以你需要做的就是拥有：

<a [routerLink]='link' routerLinkActive="router-link-active">name</a>

然后它将识别哪个路由是当前活动的路由并应用你的 router-link-active 类。

注意：

对于那些在a 标签以外的标签上使用 routerLink 的人，（我个人在按钮上使用它）routerLinkActive 不起作用，但应该在路由器的下一个版本中起作用 - https://github.com/angular/angular/issues/9755

【讨论】：

这很好用，我怎样才能在我的组件打字稿类中获得一个布尔值，指示路由器链接是否处于活动状态？

那么......您是否只需要知道您的页面上是否有一个元素具有 router-link-active 类？还是您想找出当前处于活动状态的路线？

我想知道哪个路由当前处于活动状态，实际上我在 TabComponent 的模板中有一个路由链接，然后在父组件中使用 *ngFor 生成许多路由链接

在这种情况下，您需要考虑使用ActivatedRoute，它会返回您可能想要的所有内容以及有关已加载组件的更多信息。如果您最终在实施时遇到问题，请创建一个新问题

也适用于已发布的 2.0 版本。

【参考方案2】：

新路由器有一个名为“routerLinkActive”的指令，这是您感兴趣的。

例如<a [routerLink]="/user/bob" routerLinkActive="active-link">Bob</a>

"当 url 为 '/user' 或 '/user/bob' 时，active-link 类将被添加到 a 标签中。如果 url 发生变化，则该类将被删除。"

【参考方案3】：

什么都不知道，这就是我要给你指出的方向。

<a [routerLink]='link' [ngClass]="'router-link-active': routerLink.something === something">name</a>

如果 routerLink.something === something 或您想要的任何表达式的计算结果为 true，则将应用该类（和样式）。