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

Question

在 Font Awesome 5 从 4.7.0 的升级过程中，我注意到我为标签提供的任何类绑定都<i>无法像以前那样发挥作用。

想象一下带有类绑定的以下元素：

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

iconClass并想象存在的初始价值'fas fa-cog'。iconClass当更改to的值时'fas fa-ship'，图标不会更新为新设置的图标类。它将仍然是一个齿轮图标。

我相信发生这种情况是因为 Font Awesome 5<i>用<svg>标签替换了标签，并且没有正确复制类绑定，因此不会触发图标更改。

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

这种行为可以/应该如何实施？

Answer 1

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

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

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

值的更改iconClass将在父元素中生成一个新的<i>子元素（同时替换旧<svg>元素），之后 Font Awesome 5 会将该<i>子元素转换为<svg>.

当然，任何元素都可以用作父元素和子元素，我只是觉得<i>看起来短而干净，它将由 Font Awesome 5 生成的嵌套<svg>在<i>.