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

Question

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

ERROR Error: Uncaught (in promise): Error: Template parse errors:'fa-icon' is not a known element

仅供参考：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>

工具栏-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;
}

机身-list.component.html

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

机身-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() {
  }
}

机身-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>

Answer 2

编辑您还可以导入

ShareButtonModule 已经导出 FontAwesomeModule.

原回答

假设您已经安装了 font awesome npm 包，您需要将 FontAwesomeModule 添加到模块的导入中

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

@NgModule({
 //...
imports: [
     //...
   FontAwesomeModule
  ],
})
export class AppModule { }

有关详细信息，请参阅此答案：

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

fa-icon is not a known element in a Reusable Module

typescript

angular-module

angular-components

angular

angular-elements