angular - ngx-editor with font-awesome 5+

Question

使用最新版本的 font-awesome 5.3 时，工具栏上的某些按钮图标无效。

在 ngx-editor 支持 5.3 之前，任何人都有一个好的解决方法吗？

• “图像”-按钮： fa-picture-o 已替换为 fa-image
• “unlink”-button： fa-chain-broken 已被 fa-unlink 替换

...希望有人在他们的项目中解决了这个问题！:)

谢谢！

Answer 1

我阅读了文档，但找不到任何更改图标的方法

现在我的解决方案是替换 ngAfterViewChecked 生命周期钩子中的（样式）类。

如果您不使用 ngAfterViewChecked 生命周期挂钩，您将在类存在之前替换它们。（例如它们不会被发现，因为编辑器还没有在 DOM 中）

我希望这个（临时和丑陋的）解决方案暂时有效。

ngAfterViewChecked() {
    this.replaceFontAwesomeIcons('fa-scissors',  'fa-cut');
    this.replaceFontAwesomeIcons('fa-files-o',  'fa-copy');
    this.replaceFontAwesomeIcons('fa-repeat',  'fa-redo');
    this.replaceFontAwesomeIcons('fa-picture-o',  'fa-image');
  }

private replaceFontAwesomeIcons(currentClassName: string, newClassName: string) {
    const icons = document.getElementsByClassName(currentClassName);
    for (let i = 0; i < icons.length; i++) {
      icons.item(i).classList.add(newClassName);
      icons.item(i).classList.remove(currentClassName);
    }
  }