web-dev-qa-db-ja.com

Angular複数のパスのrouterLinkActive

私のAngular 5プロジェクトでは、bootstrap nav-barメニューがあります。パスの開始が一致するとrouterLinkActiveはうまく機能します次のようなメニューのrouterlink。

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/entity/teacher']">Teacher</a>
</li>

上記のコードは、 `/ entity/Teacher/add 'などのメニュー項目を適切にアクティブ化します

問題は、整列していないものを含む一種の「キャッチオール」ナビゲーションアイテムがあることです。

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/config']">Configuration</a>
</li>

/tasksだけでなく、パス/entity/settingsと/configでもこのアイテムを強調表示したいと思います。

問題は、アプリのルーティングを変更できないことです。メニュー項目をrouterLink内のルーティングパスだけでなく他のルーティングパスにも揃えるにはどうすればよいですか？

angularroutingangular2-routingrouterlinkactive
7
Sam

テンプレート参照変数を使用して外部ルートへの参照を取得し、それらがアクティブなときにクラスを適用できます。それらを既存のrouterLinkActive要素または非表示の要素にリンクすることができます。これは、hiddenメソッドを使用した例です。

<li routerLinkActive="active" [ngClass]="{'active': tasksActive.isActive || settingsActive.isActive }">
  <a [routerLink]="['/config']">Configuration</a>
</li>
<a routerLink="/tasks" routerLinkActive #tasksActive="routerLinkActive" style="display: none"></a>
<a routerLink="/entity/settings" routerLinkActive #settingsActive="routerLinkActive" style="display: none"></a>
12
Teddy Sterne

指定されているように、複数のrouterLinksがありますが、1つのrouterLinkActiveのみがハイライトまたは有効になっています。これは、私にとっては問題なく機能します。

<a class="nav-link" href="javascript:void(0)" routerLink='/rulesConfiguration' routerLinkActive='active' [ngClass]="{'active': createRules.isActive}"><i class="nav-icon fa fa-list-alt "></i>Rules Configuration</a>
<a class="nav-link" href="javascript:void(0)" routerLink="/createRules" routerLinkActive #createRules="routerLinkActive" style="display: none"><i class="nav-icon fa fa-list-alt "></i>Rules </a>
0
Praneet Chaganti