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

如果您经常需要，我会将按钮包装到自定义组件中，以便更轻松地重用此模式。