4

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

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

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

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

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

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

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

4

3 回答 3

4

灵感来自@huocp using 的答案innerhtml。

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

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

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

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

于 2018-02-22T08:46:12.983 回答
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>` : '';
  }
}
于 2018-02-21T12:47:45.123 回答
1

我以前有完全相同的问题。

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

切换到 fa5 完美支持的“带有 css 的 web 字体”。它会像 fa4 一样服从你的命令。

于 2018-02-21T11:42:11.640 回答