小编mgi*_*rni的帖子

Angular - 单击时更改字体真棒图标颜色

我使用以下 HTML 创建了一个名为“like”的组件:

<div (click)="onClick()">
   <i class="fas fa-heart" [class.active]="isActive"></i>
</div>
Run Code Online (Sandbox Code Playgroud)

当我点击图标时,它应该改变变量“isActive”,因此图标的颜色也应该改变。这是.ts:

onClick() {
    this.isActive = !this.isActive;
  }
Run Code Online (Sandbox Code Playgroud)

CSS:

.fa-heart {
    color: #ccc;
}

.fa-heart.active {
    color: deeppink;
}
Run Code Online (Sandbox Code Playgroud)

但是,单击时不会添加或删除“活动”类。为什么?

mouseclick-event font-awesome angular

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

angular ×1

font-awesome ×1

mouseclick-event ×1