當angularLink中的routerLink處於活動狀態時，向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> 

感謝您的幫助！

Mathieu

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> 

如果您經常需要這個，我會將按鈕封裝到一個自定義組件中，以便重用此模式。