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

Question

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

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

有人可以帮我吗？

Answer 1

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

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

.ts文件中的

clicked: boolean = false;

Clicked() {
this.clicked = true;
}

Answer 2

解决方案：

1. 可以使用localStorage来存储单击链接的信息。

2. 可以使用路由器queryParams来存储信息。 使用ActivatedRoutes捕获信息：

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

不是最好的解决方案，但是可以解决。

Answer 3

[routerLinkActiveOptions] =“ {确切：true} 你把它放在旁边，就像它的作品一样