当 routerLink 在 angular2 中处于活动状态时，将指令添加到 UI 元素

Question

我目前正在使用 angular2 和 material2。我的目标是在我的 routerLinkActive 处于活动状态时将 md-button 更改为 md-raised-button。例如，如果我在“/todos”上，我希望将 "md-button" 指令替换为 "md-raised-button".

我在网上找不到任何解决办法，希望有人能指导我。我很想避免使用 CSS class.

<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>

如果你经常需要这个，我会把按钮包装到一个自定义组件中，以便更容易地重用这个模式。

当 routerLink 在 angular2 中处于活动状态时，将指令添加到 UI 元素

Add a directive to an UI element when the routerLink is active in angular2

angular

angular2-routing

angular2-router