字体图标 Font Awesome 5 的类绑定更改不影响图标。

Question

在从4.7.0升级到Font Awesome 5的过程中，我注意到任何赋予标签类绑定的类都无法像以前一样起作用。

想象以下带有类绑定的元素： 并且假设iconClass的初始值为'fas fa-cog'。当将iconClass的值更改为'fas fa-ship'时，图标不会更新为新设置的图标类。它仍然是一个 cog 图标。

我认为这是因为Font Awesome 5使用标记，并没有正确复制类绑定，因此没有触发图标更改。

在下面的示例中，将在两秒后更改绑定类以说明问题，请参见此GistRun以查看问题示例。有关实现，请参见app.html和app.js。它还包含了一个脏的解决方法。

如何/应该实现这种行为？

- Bryandh

---

有一个升级文档（https://fontawesome.com/how-to-use/upgrading-from-4）。它没有帮助到您吗？ - Andy

@Andy 升级文档没有涉及到这个问题，所以不行。 - Bryandh

我也尝试使用FontAwesomeConfig = { autoReplaceSvg: 'nest' }设置。<svg>被嵌套在<i>元素中。然而，尽管<i>元素的类绑定已更改，SVG图标仍未更改。 - Bryandh

Answer 1

受@huocp的答案启发，利用innerhtml。

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

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

更改iconClass值将生成父元素中的新的<i>子元素（替换旧的<svg>元素），之后Font Awesome 5将将此<i>子元素转换为<svg>。

当然，任何元素都可以用作父元素和子元素，我只是觉得<i>看起来简洁明了，它会在<i>内嵌入由Font Awesome 5生成的<svg>。

- Bryandh

---

太棒了。这很容易。 - user1375096

Answer 2

点击此处查看可运行的Gist：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>` : '';
  }
}

- user1375096

---

非常感谢您的组件建议。我已经尝试过了，确实有效！不过，我找到了一个更简单的解决方案，请查看我的回答=> https://dev59.com/PKnka4cB1Zd3GeqPKzsf#48922982 - Bryandh

Answer 3

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

正如你所说，你正在使用“svg with js”（fa5推荐的方式）。它会与Aurelia发生冲突，因为svg版本使用JavaScript替换DOM元素，Aurelia的绑定会随着旧的DOM元素一起被破坏。

改用“web font with css”，这是fa5完美支持的方式。它将像fa4一样服从你的命令。

- user1375096

---

此外，“web 字体”总体而言为我提供了更好的体验。“svg”版本在行高和其他与字体相关的样式上有很大不同，因为在浏览器看来它并不是真正的字体。 - user1375096

这确实可以工作，因为行为与旧的 Font Awesome 行为相同。然而，我想要访问其引入的新功能，如 SVG 图标的变换、分层和遮罩。 - Bryandh

好的，这是一个权衡。目前，如果您想使用Aurelia进行控制，那么您没有选择。 - user1375096