Question

我正在使用Angular 2+和Material 2.我有一些md-button（s），我想动态地更改为md-raised-button。例如，我想要这个：

<a md-button [routerLink]="['/home']">Home</a>

改为：

<a md-raised-button [routerLink]="['/home']">Home</a>

当链接处于活动状态或我将鼠标悬停在其上时等。

Answer 1

根据此answer不支持。

但你可以这样做：

<a *ngIf="condition" md-button [routerLink]="['/home']" 
(mouseover)="condition= true" (mouseout)="condition= false">Home</a>

<a *ngIf="!condition" md-raised-button [routerLink]="['/home']"
(mouseover)="condition= true" (mouseout)="condition= false" >Home</a>

Answer 2

我会这样做

JsonNode

默认情况下，该值将等于false，因此将添加md-button属性，并且在悬停时将添加md-raised-button并删除md-button，您可以扩展有关您需要的逻辑。

Answer 3

对按钮的关注非常简单，如下所示

<button md-raised-button (click)="button1.focus()">Focus on Raised 
Button</button>
<button md-raised-button #button1>Raised button</button>

要将md-button更改为md-raised-button，您可以使用以下属性绑定

<a md-button routerLink="." [class.md-raised-button]="val">Flat button</a>

<button md-raised-button (click)="focus(button1)">Focus on Raised Button</button>

<button md-raised-button #button1>Raised button</button>

Typescript方法将为

    export class ButtonDemo {
       val:boolean=false;
       focus(element){
              element.focus();
              this.val=true;
        }
   }

<强> LIVE DEMO

如何在Angular 2中动态更改指令

3 个答案: