更改字形图标点击角2按钮

Question

我希望当我点击这个按钮时，'glyphicon-plus'变成'glyphicon-minus'，当我再次点击时，它会再次'glyphicon-plus ”。 我想它应该是可复制的。我不希望它在CSS或jQuery中。 app.component.html：

<button data-toggle="collapse" 
     [attr.data-target]="'#demo' + RowIndex"> 
     <span class="glyphicon glyphicon-plus"></span> 
</button> 

Answer 1

在你的模板，使用sign绑定和click事件作为结合如下：

<button data-toggle="collapse" 
     (click)="toggleSign()" 
     [attr.data-target]="'#demo' + RowIndex"> 
     <span class="glyphicon glyphicon-{{sign}}"></span> 
</button> 

在你的组件类，每次点击的sign属性更改。

export class MyComponent { 
    .... 
    sign = 'plus'; // or minus if you want that first 

    toggleSign() { 
    if(this.sign == 'plus') { 
     sign = 'minus'; 
    } else { 
     sign = 'plus'; 
    } 
    } 
    ...... 

} 

总是想着事情这样的角 - 我认为我的组件的状态的反映。所以，如果我想直观地改变事物，使用绑定系统将我的视图的可变部分绑定到我的组件的属性，只需更改组件属性以反映我想要的视图。