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

【问题标题】：Angular 4 - Change class in active elementAngular 4 - 更改活动元素中的类
【发布时间】：2017-12-13 05:14:30
【问题描述】：

我有以下按钮：

<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 实现这一目标？

【问题讨论】：

我找到了一个合适的解决方案，但是它涉及到 sass 的使用，所以这里的问题并不是真正的问题。但基本上，如果您使用的是 sass，请使用包装类（比如 .modal-close），在包装类中，您可以在需要的类上使用 @extend。即：@extend .icon-eoa-close 在普通按钮上，@extend .icon-eoa-close-c 在活动按钮上。

标签： javascript css angular

【解决方案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" >

第一个必须工作！

【讨论】：