Angular 不能在动态组件中使用 fontawesome

Question

我用这个 post 来动态加载一些组件

 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

 const template =`
    <div class="btn-group">
      <button (click)="play()" class="btn btn-sm btn-outline-info">
        <fa-icon icon="play"></fa-icon>
      </button>

    </div>`;
    const tmpCmp = Component({template: template})(class {

    });
    const tmpModule = NgModule({
      imports: [CommonModule,FontAwesomeModule],
      declarations: [tmpCmp]
    })(class {
    });

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
        .then((factories) => {
            const f = factories.componentFactories[0];
            const cmpRef = f.create(this._injector, [], null, this._m);
            cmpRef.instance.name = 'B component';
            this._container.insert(cmpRef.hostView);
        })

当使用 fa-icon 加载模板时，不会显示任何内容，也不会返回任何错误。

Answer 1

如果你想动态添加一个 fa 类，我会使用 [ngClass] 来显示一个特定的 fa 图标，因为你可以使用插值:

在您的组件中:

public faIcon:string="fa-plane"

我在这里硬编码了一个 fa-icon 名称，但您可以随意设置它。

在您的模板中:

<span class="fa" [ngClass]="{faIcon}}></span>