如何在Angular 2中動態更改指令

我正在使用Angular 2+和Material 2。我有一些md-button（s），我想要動態更改爲md-raised-button。例如，我想這一點：如何在Angular 2中動態更改指令

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

改變成這樣：

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

當鏈路是活動的，否則我盤旋在它等

來源

2017-03-05 Sabbir Rahman

你爲什麼要更改MD-按鈕MD-上調按鈕？ – Aravind

根據此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>

來源

2017-03-05 09:27:21

我會做到這一點像這樣

<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將被刪除，您可以根據需要擴展邏輯。

來源

2017-03-05 09:14:32

焦點上的按鈕是如下

<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

來源

2017-03-05 09:20:09 Aravind

如何在Angular 2中動態更改指令

回答

相關問題