fa图标不是可重用模块中的已知元素

Question

不确定为什么在可重用模块上会发生这种情况(或者Iv'e出了什么问题(。

错误错误：未捕获(在promise中(：错误：模板解析错误："a-icon"不是已知元素

FYI:fa-icon是一个字体很棒的元素

工具栏制造组件.html:

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

工具栏制造组件：

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

工具栏制造模块.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;
}

机身列表.组件.html

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

机身列表.组件.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() {
}
}

机身列表模块.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

编辑您也可以导入

已经导出CCD_ 3的CCD_。

原始答案

假设您已经安装了字体很棒的npm包，那么您需要将FontAwesomeModule添加到模块的导入中

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
//...
imports: [
//...
FontAwesomeModule
],
})
export class AppModule { }

有关更多信息，请参阅此答案：链接