通过 Angular 组件更改字体真棒图标答案

【问题标题】：Changing font awesome icons through Angular components通过 Angular 组件更改字体真棒图标
【发布时间】：2023-03-04 16:22:02
【问题描述】：

我在 Angular 5 中使用 font-awesome 版本 4.7.0。当我向屏幕添加图标时，图标立即从标记更改为，我无法从 Angular 组件访问它的类，这是我想要做的。

由此产生的行为是第一个定义的图标正确显示，但我所做的任何后续更改都应反映在 UI 上并更改字体真棒图标根本不会显示。

具体问题是我希望在对表格进行排序时更改图标。初始图标设置为 fa-sort，它显示正确，但是当单击表头时，内容得到排序和更新，但图标不会更改为 fa-sort-up 或 fa-sort-down。我已经测试了逻辑，它可以正常工作。

应该执行此操作的当前 HTML 代码如下所示：

<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>

【问题讨论】：

【解决方案1】：

这是因为 fontawesome 将您的标签替换为 .要更改图标，请使用此模板（在您需要的类中使用）：

<span *ngIf="sortAsc"><i class="icon-sort-up"></i></span>
<span *ngIf="!sortAsc"><i class="icon-sort-down"></i></span>

【讨论】：

【解决方案2】：

尝试在组件代码本身中分配图标，例如：

在组件中

getIcon(){
   sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 
  'icon-sort-down'
}

我认为它与更改检测有关，或者您可以在排序后通过导入更改检测手动触发它。

例如：

`constructor(cd: ChangeDetectorRef) {}`

然后在你的代码中，

    this.cd.detectChanges();

【讨论】：