RouterLinkActive 用於帶有參數的 RouterLink (/dynamic)

Question

在瀏覽應用程序本身時使用動態生成的鏈接時，RouterLinkActive 不起作用。

例如，在我的頂部導航中，我有這個；

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a>

雖然硬編碼版本可以工作。

<a [routerLink]=['user','bob']>View Bobs Account</a>

一個 plunk 在這里; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview

單擊“John”和“Dynamic Router Link Name =”，“John”應該都處於活動狀態。 這有時在第一次點擊時有效，如果是這樣，然后點擊返回“主頁”，再次點擊“約翰”，您將看到只有硬編碼鏈接被注冊為活動，即使hrefs是相同的。

這是設計的/不可能的嗎？ 還是我設置錯誤？

Answer 1

在您的組件中：

import {Router} from '@angular/router';

isActive(instruction: any[]): boolean {
  // Set the second parameter to true if you want to require an exact match.
  return this.router.isActive(this.router.createUrlTree(instruction), false);
}

在您的 HTML 中：

<a [class.active]="isActive(['user', currentUser.name])">

Router.isActive()文檔

Answer 2

接受的答案對我不起作用，我只是想突出顯示頂級路線匹配，所以我使用了：

isActive(url): boolean {
    return this.router.url.includes(url);
}

和：

[class.active]="isActive('url')"

Answer 3

routerLinkActive 在初始加載時評估，並且僅在路由更改時評估。 更改鏈接時不會重新評估。 因此，動態生成的鏈接不適用於 routerLinkActive。 Victor Bredihin 的上述解決方案在渲染期間評估組件函數時起作用。

Answer 4

我發現以下解決方法也適用於我的代碼：

 <a [routerLink]=['user', currentUser.name] [routerLinkActive]='"active dummyclassname-" + currentUser.name'> {{currentUser.name}} </a>

即在重新驗證“routerLinkActive”時欺騙 Angular。

Answer 5

更改您的 html 如下：

<a [routerLink]=['user', currentUser.name] 
  routerLinkActive='active'>
    {{currentUser.name}}
</a>

您還可以檢查為什么 Angular2 routerLinkActive 將活動類設置為多個鏈接？

Answer 6

您可以為鏈接元素的祖先應用一個選項

[routerLinkActiveOptions]="{exact: true}"