Angular不能在动态组件中使用字体

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>

Answer 2

图标faPlay从包导入"@fortawesome/free-solid-svg-icons“

import { faPlay} from '@fortawesome/free-solid-svg-icons';

在动态模板中：

<fa-icon [icon]="faPlay"></fa-icon>

添加到类公共变量"faPlay"：

const tmpCmp = Component({template: template})(class {
  faPlay = faPlay
});

结果：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faPlay} from '@fortawesome/free-solid-svg-icons';

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

    </div>`;
    const tmpCmp = Component({template: template})(class {
      faPlay = faPlay
    });
    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);
        })