1. ホーム
  2. twitter-bootstrap

Angular 2でBootstrap navbarの "active "クラスを設定する方法は?

2023-10-05 23:50:20

質問

Angular 2でBootstrapのナビバーquot;active"クラスを設定するにはどうすればよいですか?私は唯一の Angular 1の方法 .

にアクセスすると について ページに class="active" について を削除し class="active" について ホーム .

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['Home']">Home</a></li>
    <li><a [routerLink]="['About']">About</a></li></li>
</ul>

ありがとうございます。

どのように解決するのですか?

新しい3.0.0のコンポーネントルータを使用する場合( https://github.com/angular/vladivostok ) を使用すると routerLinkActive ディレクティブを使用します。それ以上のjavascriptは必要ありません。

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li>
  <li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li>
</ul>

私は "@angular/router": "^3.0.0-alpha.7" を使いました。