Question

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

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

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

假设iconClass的初始值为'fas fa-cog'。将iconClass的值更改为'fas fa-ship'时，图标将不会更新为新设置的图标类。它仍将是 cog 图标。

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

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

如何/应该实施此行为？

Answer 1

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

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

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

iconClass值的更改将在父级中生成新的<i>子级（同时替换旧的<svg>元素），之后Font Awesome 5将转换此{{1}将孩子变成<i>。

当然，任何元素都可以用作父元素和子元素，我只是认为<svg>看起来简洁干净，它会将Font Awesome 5生成的<i>嵌套在<svg>中

Answer 2

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

正如你所说，你正在使用“svg with js”（fa5推荐方式）。它确实打击了Aurelia，因为svg版本使用JavaScript来替换DOM元素，Aurelia的绑定与旧的DOM元素一起被破坏。

切换到“带css的网络字体”，fa5支持完美。它将遵循你的命令为fa4。

Answer 3

请在此处查看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>` : '';
  }
}

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

3 个答案: