单击 angular 中的按钮更改字形图标 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>

在您的组件 class 中，每次点击更改 sign 属性。

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

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

 }

在 Angular 中总是这样想事情 - 我的观点反映了我的组件的状态。因此，如果我想在视觉上改变事物，使用绑定系统将我的视图的可变部分绑定到我的组件的属性，并且只需更改组件属性以反映我想要的视图。

单击 angular 中的按钮更改字形图标 2

change glyph-icon on click on the button in angular 2

toggle

glyphicons

angular