2017-01-25 4 views
0

は、以下の例を検討:RouterLinkとRouterLinkActiveの仕組みは?

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a> 

のURLは「/ユーザ」または「/ユーザ/ボブ」のいずれかである場合には、アクティブリンククラスは、タグに追加されます。

URLがあまりにも「/ユーザー」または「/ユーザー/ボブ」のいずれかの場合に変更この例は...

<a routerLink="/user" routerLinkActive="active-link">Bob</a> 

アクティブリンククラスは、タグにapplyedことにする場合は?

答えがノーなら、どうすればこのように動作させることができますか?

+0

何をしたいのですか? –

+0

アクティブなルートが子ルートである場合にCSSを適用したいと思います。 –

+0

アクティブルートを子コンポーネントに適用すると、親コンポーネントは変更されません。 –

答えて

1

URLを完全一致させる場合は、 routerLinkActiveOptionsを追加できます。

<a [routerLink]="/user" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a> 

URLが '/ user'の場合のみ、クラスが追加されます。 '/ user/bob'は表示されません。