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

Question

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

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

改成这样：

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

当 link 处于活动状态或我将鼠标悬停在它上面等时

Answer 1

我会这样做

<a [attr.md-button]="!value ? true : null"
[attr.md-raised-button]="value ? true : null"
(mouseover)="value = true"
(mouseout)="value = false"
[routerLink]="['/home']">Home</a>

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

Answer 2

按钮上的焦点非常简单，如下所示

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

打字稿方法将如

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

LIVE DEMO

Answer 3

根据这个不支持。

但你可以这样做：

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

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

How to Change Directive Dynamically in Angular 2

angular

angular-material2