通过Angular组件追踪字体真棒图标

Question

我在Angular 5中使用了真棒字体4.7.0版本。当我在屏幕上添加图标时，该图标立即从tag变为，并且我无法从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>

Answer 1

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

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

Answer 2

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

在组件中

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

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

例如：

`constructor(cd: ChangeDetectorRef) {}`

，然后在您的代码中

    this.cd.detectChanges();