Javascript 角度4-活动元素中的更改类别

我有以下按钮：

<button  class="icon-eoa-close pull-right" (click)="hideModal()" aria-label="Close" >

---

.icon-eoa-close

类引用了一个字体项，我想在单击按钮（活动）时将该类更改为

.icon-eoa-close-c

。如何使用Angular 4实现这一点

您可以使用ngClass，这是推荐的方法，例如：

<button [ngClass]="{'icon-eoa-close': isClosed, 'icon-eoa-close-c': !isClosed}"  class="pull-right" (click)="hideModal()" aria-label="Close" >

我不确定，但我认为它也应该使用速记：

<button [ngClass]="isClosed ? 'icon-eoa-close' : 'icon-eoa-close-p'"  class="pull-right" (click)="hideModal()" aria-label="Close" >

---

第一个必须有效

我找到了一个合适的解决方案，但是它涉及到sass的使用，所以这里的问题并不是真正的问题所在。但基本上，如果您使用的是sass，则使用包装类（比如，

.modal close

），在包装类中，您可以对所需的类使用

@extend

。ie:

@extend.icon-eoa-close

在普通按钮上，在活动按钮上，

@extend.icon-eoa-close-c

。

<button [ngClass]="isClosed ? 'icon-eoa-close' : 'icon-eoa-close-p'"  class="pull-right" (click)="hideModal()" aria-label="Close" >