在 Font Awesome 5 从 4.7.0 的升级过程中，我注意到我给 <i> 的任何类绑定(bind)标签将无法像以前那样发挥作用。
想象一下具有类绑定(bind)的以下元素:
<i class.bind="iconClass"></i>
想象一下 iconClass 的初始值正在'fas fa-cog' .当更改 iconClass 的值时至 'fas fa-ship' ，图标不会更新为新设置的图标类。它仍将是一个齿轮图标。
我相信这是因为 Font Awesome 5 取代了 <i>带有 <svg> 的标签标记并且不会正确复制类绑定(bind)，因此不会触发图标更改。
在下面的示例中，绑定(bind)类在两秒后发生更改以说明问题，请参阅this GistRun有关问题的示例。参见 app.html和 app.js为实现。它还包含一个肮脏的解决方法。
如何/应该如何实现这种行为？
最佳答案
灵感来自@huocp 利用 innerhtml 的回答.
使用自定义组件解决这个问题确实有效。但是，由于我的项目中只有一个带有类绑定(bind)的图标，因此我找到了一种更简单的方法:
<i innerhtml="<i class='${iconClass}'></i>"></i>
iconClass 的变化值将生成一个新的 <i>父元素中的子元素(同时替换旧的 <svg> 元素)，之后 Font Awesome 5 将转换此 <i> 元素 child 变成一个<svg> .
当然任何元素都可以作为父子元素，我只是觉得<i>看起来又短又干净，它将嵌套 <svg>由 Font Awesome 5 在 <i> 中生成.
关于javascript - Font Awesome 5 图标的类绑定(bind)更改不影响图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48904240/