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图标，因为可以使用插值：

在您的组件中：

f_open(fp, "0://path/to/file", FA_CREATE_ALWAYS);

我已经在此处对fa-icon名称进行了硬编码，但是您可以根据需要设置它。

在您的模板中：

public faIcon:string="fa-plane"

Answer 2

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

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

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

2 个答案: