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>

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

当routerLink在angular2

1 个答案: