Angular 角形罐'；不要在动态组件中使用字体

我用它来动态加载一些组件

 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);
        })

从'@fortawesome/angular-fontawesome'导入{FontAwesomeModule}；
常量模板=`
`;
const tmpCmp=组件（{template:template}）（类{
});
常量tmpModule=NgModule({
导入：[CommonModule，FontAwesomeModule]，
声明：[tmpCmp]
})（类{
});
此._compiler.compileModule和所有组件同步（tmpModule）
.然后（（工厂）=>{
常数f=工厂。组件工厂[0]；
const cmpRef=f.create（this.\u喷油器，[]，null，this.\u m）；
cmpRef.instance.name='B component'；
此._container.insert（cmpRef.hostView）；
})

---

当模板加载fa图标时，不会显示任何内容，也不会返回任何错误。

如果要动态添加fa类，我将使用[ngClass]显示特定的fa图标，因为您可以使用插值：

在您的组件中：

public faIcon:string="fa-plane"

我在这里硬编码了一个fa图标名称，但是你可以随意设置

在模板中：

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

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

---

图标faPlay从包“@fortawesome/free solid svg图标”导入

在动态模板中：

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

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

结果:

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);
        })

从'@fortawesome/angular-fontawesome'导入{FontAwesomeModule}；
从“@fortawesome/free solid svg icons”导入{faPlay}；
常量模板=`
`;
const tmpCmp=组件（{template:template}）（类{
faPlay=faPlay
});
常量tmpModule=NgModule({
导入：[CommonModule，FontAwesomeModule]，
声明：[tmpCmp]
})（类{
});
此._compiler.compileModule和所有组件同步（tmpModule）
.然后（（工厂）=>{
常数f=工厂。组件工厂[0]；
const cmpRef=f.create（this.\u喷油器，[]，null，this.\u m）；
cmpRef.instance.name='B component'；
此._container.insert（cmpRef.hostView）；
})

fa图标的模板在哪里？通常，在标准html标记上使用FA时，您会添加一个类“FA-iconName”。这通常位于span/i标记上：。您是否为fa图标定义完成了此操作？