在角度 4 中将活动类添加到 routerlink答案

【问题标题】：Add active class to routerlink in angular 4在角度 4 中将活动类添加到 routerlink
【发布时间】：2018-07-09 14:52:02
【问题描述】：

我想在更改路线时添加一个活动类。我在一个组件（主页）中有一个链接，该链接重定向到其他组件（详细信息页面）。

<a routerLink="/dashboard/details" (click)="Clicked()"</a>

现在，当我从详细信息页面返回主页时，我想让一个链接处于活动状态，告诉用户该链接已被点击。

我尝试使用 routerLinkActive，但这似乎不起作用。

html

<a routerLink="/dashboard/details" routerLinkActive="active-link" (click)="Clicked()"</a>

css

.active-link {
    color:red;
    font-weight: bold;
}

谁能帮我解决这个问题？

【问题讨论】：

【解决方案1】：

为什么不在点击事件中添加类名。试试这个。

<a routerLink="/dashboard/details" [ngClass]="{'active-link':clicked}" routerLinkActive="active-link" (click)="Clicked()"</a>

在 .ts 文件中

clicked: boolean = false;

Clicked() {
this.clicked = true;
}

【讨论】：

可能是因为我使用了“active”类名而不是“active-link”。你可以试试 [ngClass]="{'active-link':clicked}"。
当我从详细信息页面返回主页时，this.clicked 显示为 false
你在哪里定义了那个事件和那个链接？详细信息组件。
链接和事件在主组件中。
好的，所以它是错误的，因为当您单击该链接并重定向到仪表板组件时，主组件会被破坏。这就是我的想法，如果这是真的，那么要让它工作，你必须创建一个共享服务并存储该布尔值。

【解决方案2】：

[routerLinkActiveOptions]="{ 准确：真 } 你已经把这个放在喜欢它的工作旁边了

【讨论】：

【解决方案3】：

解决方案：

可以使用localStorage来存储被点击的链接信息。
可以使用路由器queryParams来存储信息。使用ActivatedRoutes 捕获信息：

this.route.queryParamMap.subscribe( params => { this.enableCard = JSON.parse(params.get('enableCard')); })

不是最好的解决方案，而是变通方法。

【讨论】：