Question

我在md-tab-group中有以下图标：

<md-tab-group>
  <md-tab *ngFor="let tab of arrayOfTabs">
    <ng-template md-tab-label>
        <md-icon (click)="changetab()">close</md-icon>
    </ng-template>
    My Tab Content
</md-tab>
</md-tab-group>

我想这样做，而不是＆＃34;关闭＆＃34;材料图标，将其更改为＆＃34; star＆＃34;图标。如何通过该特定选项卡图标上的点击事件来实现这一目标？

Answer 1

在组件中：

<head>

在HTML中

public icon = 'close'; 

public changeIcon(newIcon: string ){
    this.icon = newIcon ; 
}

Answer 2

打字稿

let iconName = 'delete'; 

changeIcon(newIcon:string) :void {
 this.iconName = newIcon;
}

HTML代码

<md-icon >{{ iconName }}</md-icon>

<button (click)="changeIcon('error')" >error</button>
<button (click)="changeIcon('warning')">warning</button>
<button (click)="changeIcon('folder')">folder</button>

单击此按钮时，图标将被更改。

如何使用angular2 / 4材质更改点击事件的材质图标？

2 个答案: