Добавьте директиву в элемент пользовательского интерфейса, когда routerLink активен в angular2

В настоящее время я работаю с angular2 и material2. Моя цель - изменить md-button на md-raised-button, когда мой routerLinkActive активен. Например, если я нахожусь в «/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>

Спасибо за вашу помощь!

Матье


angular angular2-routing angular2-router
person MT.    schedule 11.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не думаю, что есть более простой способ.

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

Если вам это нужно часто, я бы обернул кнопку в пользовательский компонент, чтобы упростить повторное использование этого шаблона.

person Günter Zöchbauer    schedule 11.04.2017
comment
Спасибо. Это удваивает количество строк кода, но, по крайней мере, это простое решение! Потрясающий ;) - person MT.; 13.04.2017