在 angular 4 中将 active class 添加到 routerlink

Add active class to routerlink in angular 4

我想在更改路线时添加一个活动 class。 我在一个组件(主页)中有一个 link,它重定向到另一个组件(详细信息页面)。

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

现在,当我 return 从详细信息页面返回主页时,我想让 link 处于活动状态,告诉用户此 link 已被单击。

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

html

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

css

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

谁能帮我解决这个问题?

解决方案:

  1. 可以使用localStorage来存储link点击的信息。
  2. 可以使用路由器queryParams来存储信息。 使用 ActivatedRoutes 捕获信息:

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

不是最好的解决方案,但可以变通。

为什么不在点击事件上添加 class 名称。试试这个。

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

在 .ts 文件中

clicked: boolean = false;

Clicked() {
this.clicked = true;
}

[routerLinkActiveOptions]="{ exact: true } 你已经把这个放在它的作品旁边了