注: ここにはさまざまな回答があり、そのほとんどはかつて有効でした。実際には、Angular チームがルーターを変更したため、機能するものは何度も変更されています。最終的に Angular のルーターとなる Router 3.0 バージョンでは、これら[routerLinkActive]のソリューションの多くに支障をきたしますが、独自の非常にシンプルなソリューションを提供しています。RC.3 の時点では、次に示すように使用することが推奨されています。この答え。
Angular アプリケーション (この記事の執筆時点では 2.0.0-beta.0 リリース) では、現在アクティブなルートをどのように判断するのでしょうか?
私は Bootstrap 4 を使用するアプリを開発中ですが、関連するコンポーネントがタグ内に表示されているときに、ナビゲーション リンク/ボタンをアクティブとしてマークする方法が必要です<router-output>。
ボタンの 1 つがクリックされたときに自分で状態を維持できることはわかっていますが、同じルートに複数のパスがある場合 (メイン ナビゲーション メニューとメイン コンポーネント内のローカル メニューなど) はカバーされません。
ご提案やリンクがあれば、ぜひ教えてください。ありがとうございます。
ベストアンサー1
新しい角度ルーター[routerLinkActive]="['your-class-name']"すべてのリンクに属性を追加できます。
<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>
または、必要なクラスが 1 つだけの場合は、簡略化された非配列形式を使用します。
<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>
または、必要なクラスが 1 つだけの場合は、さらに単純な形式になります。
<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>
を参照してください不十分に文書化されたrouterLinkActive指令詳細については、こちらをご覧ください。(私は主に試行錯誤でこれを理解しました。)
更新:routerLinkActiveディレクティブのより優れたドキュメントが見つかりましたここ（以下のコメント欄の @Victor Hugo Arango A. に感謝します。）