routerLinkがangular2でアクティブになっているときにUI要素にディレクティブを追加します。

Question

現在、angular2とmaterial2を使用しています。私の目標は、routerLinkActiveがアクティブなときにmd-buttonをmd-raised-buttonに変更することです。たとえば、私が "/ todos"を使用している場合、 "md-button"ディレクティブを "md-raised-button"に置き換えます。

私はインターネット上で解決策を見つけることができません、私は誰かが私を導くことを願っています。私はCSSクラスの使用を避けたいです。

<a md-button routerLink="/" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}"> 
    Home 
</a> 
<a md-button routerLink="/todos" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}"> 
    Todos 
</a> 

ありがとうございました！

マチューズ

Answer 1

私はより簡単な方法はないと思います。

<a md-button #rlActive="routerLinkActive" [hidden]="!rlActive.active" routerLink="/" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}"> 
    Home 
</a> 
<a md-button-raised #rlActive="routerLinkActive" [hidden]="rlActive.active" routerLink="/" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}"> 
    Home 
</a> 

<a md-button #rlActive="routerLinkActive" [hidden]="!rlActive.active" routerLink="/todos" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}"> 
    Todos 
</a> 
<a md-button-raised #rlActive="routerLinkActive" [hidden]="rlActive.active" routerLink="/todos" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}"> 
    Todos 
</a> 

これが頻繁に必要な場合は、ボタンをカスタムコンポーネントにラップして、このパターンを簡単に再利用できるようにします。