角度2-TypeScript（.ts）文件中的routerLinkActive =“ active”等效嗎？

Question

我在帶有routerLink=[myId]的html文件中使用routerLinkActive="active"突出顯示了ul中的活動錨。

例：

<a [routerLink]="[myId]" class="list-group-item clearfix" routerLinkActive="active">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{someName}}</h4>
  </div>
</a>

但是，當我刪除[routerlink]="[myId]"並將其替換為點擊偵聽器時（會進行一些計算，然后使用this.router.navigate(['/someURL', myId])重定向路由） routerLinkActive="active"不再起作用/突出顯示。

例：

<a (click)="onClick(myId)" class="list-group-item clearfix" routerLinkActive="active">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{someName}}</h4>
  </div>
</a>

使用routerLink=[myId]檢查錨元素時，樣式設置為：

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

是否可以在onClick()函數的.ts文件中設置活動錨樣式？ 還是有解決這個問題的更簡單方法？

Answer 1

在導航中突出顯示特定鏈接反映了應用程序的當前狀態 ：鏈接A被突出顯示是因為用戶正在查看頁面A。

您在問如何通過單擊突出顯示鏈接。 這種方法不太理想：您可能最終會在實際激活新路線/頁面之前突出顯示鏈接。 最重要的是，如果用戶由於添加了書簽而重新加載該頁面或直接導航至該頁面，則該鏈接將永遠不會突出顯示（因為沒有人單擊它）。

您需要找到一種方法來突出顯示基於應用程序狀態的鏈接，而不是作為操作的結果（典型流程是：操作=>更改狀態=>更新UI）。

也許是這樣的：

@Component({
  template: `
    <a [class.active]="currentPath == 'home'">HomeComponent</a>
  `
})
export class HomeComponent {
  currentPath = '';
  constructor(route: ActivatedRoute) {
    // Retrieve current path.
    this.currentPath = snapshot.url.join('');
  }
}

想法是檢索當前路徑並將其公開給模板。

就像Günter建議的那樣，您可能會在routerLinkActive的源代碼中找到更強大的代碼來測試當前路徑。