Question

我有以下按钮：

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

这是css：

.icon-eoa-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius:30px;
    font-size: 28px;
    color: #777;

}
.icon-eoa-close:focus {
    outline: 0;
}
.icon-eoa-close:hover {
    color: #41b97c;
}
.icon-eoa-close-c:active {
    color: #41b97c;
}

.icon-eoa-close类引用一个字体项，我想在单击按钮（活动）时将类更改为.icon-eoa-close-c。我如何使用Angular 4实现这一目标？

Answer 1

您可以使用推荐方式的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" >

第一个必须工作！

Angular 4 - 更改活动元素中的类

1 个答案: