Font Awesome 5 图标的 class 绑定更改不影响图标

Question

在 Font Awesome 5 从 4.7.0 升级的过程中，我注意到我给 <i> 标签的任何 class 绑定都不会像以前那样起作用。

想象一下具有 class 绑定的以下元素：

<i class.bind="iconClass"></i>

并想象 iconClass 的初始值为 'fas fa-cog'。将 iconClass 的值更改为 'fas fa-ship' 时，图标不会更新为新设置的图标 classes。它将保持 cog 图标。

我认为这是因为 Font Awesome 5 将 <i> 标签替换为 <svg> 标签并且没有正确复制 class 绑定，因此不会触发图标更改。

在下面的示例中，绑定的 classes 在两秒后更改以说明问题，请参阅 this GistRun 以获取问题示例。参见 app.html 和 app.js 的实现。它还包含一个肮脏的解决方法。

如何can/should实现此行为？

Answer 1

我之前遇到过完全相同的问题。

如您所说，您使用的是 "svg with js"（fa5 推荐的方式）。它确实与 Aurelia 作斗争，因为 svg 版本使用 JavaScript 替换 DOM 元素，Aurelia 的绑定与旧的 DOM 元素一起被破坏。

切换到fa5完美支持的"web font with css"。它将以 fa4 的形式服从您的命令。

Answer 2

在此处查看工作 gistrun：https://gist.run/?id=55559f3bd606aa854502f3ddbbcad480

像这样使用这个自定义组件。

<fa-svg icon-class.bind="iconClass"></fa-svg>

fa-svg.js

import {inject, inlineView, bindable} from 'aurelia-framework';

@inject(Element)
@inlineView("<template></template>")
export class FaSvg {
  @bindable iconClass;

  constructor(element) {
    this.element = element;
  }

  iconClassChanged(newIcon) {
    if (!this.live) return;
    this._rebuild(newIcon);
  }

  attached() {
    this.live = true;
    this._rebuild(this.iconClass);
  }

  detached() {
    this.live = false;
  }

  _rebuild(iconClass) {
    this.element.innerHTML = iconClass ? `<i class="${iconClass}"></i>` : '';
  }
}

Answer 3

受@huocp 的回答启发 innerhtml.

使用自定义组件解决这个问题确实有效。但是，由于我的项目中只有一个带有 class 绑定的图标，因此我找到了一种更简单的方法：

<i innerhtml="<i class='${iconClass}'></i>"></i>

更改 iconClass 值将在 parent 内生成新的 <i> child（同时替换旧的 <svg> 元素），之后which Font Awesome 5 会将此 <i> child 转换为 <svg>.

任何元素都可以作为parent和child元素当然，我只是觉得<i>看起来短而干净，它会嵌套生成的<svg> <i>.

内的 Font Awesome 5

Font Awesome 5 图标的 class 绑定更改不影响图标

Font Awesome 5 icon's class binding change doesn't affect the icon

html

javascript

font-awesome

aurelia

font-awesome-5