fa-icon 不是可重用模块中的已知元素

Question

不确定为什么在可重用模块上会发生这种情况（或者我做错了什么）。

ERROR 错误：未捕获（承诺中）：错误：模板解析 错误：'fa-icon' 不是已知元素

仅供参考：fa-icon 是 Font Awesome 元素

工具栏-fab.component.html：

<button
    mat-mini-fab
    class="mat-mini-fab mat-accent"
    routerLink="{{ fabLink }}">
  <fa-icon icon="{{ fabIcon }}"></fa-icon>
</button>

toolbar-fab.component.ts：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-toolbar-fab',
  templateUrl: './toolbar-fab.component.html',
  styleUrls: ['./toolbar-fab.component.scss']
})
export class ToolbarFabComponent {
  @Input() fabIcon: string;
  @Input() fabLink: string;
}

工具栏-fab.module.ts：

import { Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { ToolbarFabComponent } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.component';

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

library.add(faPlus);

@NgModule({
  imports: [
    CommonModule,
    FontAwesomeModule,
    RouterModule
  ],
  declarations: [
    ToolbarFabComponent
  ],
  exports: [
    ToolbarFabComponent
  ]
})

export class ToolbarFabModule {
  @Input() fabIcon: string;
  @Input() fabLink: string;
}

airframe-list.component.html

. . .
<app-toolbar-fab
  [fabIcon]="fabIcon"
  [fabLink]="fabLink">
</app-toolbar-fab>
. . .

airframe-list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-airframe-list',
  templateUrl: './airframe-list.component.html',
  styleUrls: ['./airframe-list.component.scss']
})
export class AirframeListComponent implements OnInit {

  fabIcon = 'plus';
  fabLink = '/inventory/add-airframe';

  ngOnInit() {
  }
}

airframe-list.module.ts

import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';

import { MaterialModule } from '@app/shared/material.module';

import { AirframeListRoutingModule } from '@app/modules/inventory/airframes/airframe-list-routing.module';
import { AirframeListComponent } from '@app/modules/inventory/airframes/pages/airframe-list/airframe-list.component';
import { ToolbarFabModule } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.module';

@NgModule({
  imports: [
    CommonModule,
    FlexLayoutModule,
    MaterialModule,
    ToolbarFabModule,
    TranslateModule,
    AirframeListRoutingModule
  ],
  declarations: [AirframeListComponent],
})
export class AirframeListModule {
}

感谢您的帮助！

Answer 1

我认为这是 FontAwesome 特有的，因为我原来的方法是作为组件工作的（为什么？？）。

// Originally
<fa-icon icon="{{ fabIcon }}"></fa-icon>

// Change too
<fa-icon [icon]="fabIcon"></fa-icon>