Angular 字体真棒大小 - 无法绑定到“ngClass”，因为它不是“fa-icon”的已知属性答案

【问题标题】：Angular fontawsome sizing - Can't bind to 'ngClass' since it isn't a known property of 'fa-icon'Angular 字体真棒大小 - 无法绑定到“ngClass”，因为它不是“fa-icon”的已知属性
【发布时间】：2018-09-03 15:59:05
【问题描述】：

我正在寻找一种调整组件大小的方法使用 fontawesome 库，如

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

library.add(
  faBell
);


@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'iwdf-icon-bell',
  template: `<fa-icon [ngClass]="cls" [icon]="['fas', 'bell']"></fa-icon>`,
  styles: [`:host {
    display: inline-block;
  }`]
})
export class IconBellComponent{
  @Input() cls: string;
}

但我遇到了这个错误：

Can't bind to 'ngClass' since it isn't a known property of 'fa-icon'.

我知道我可以像这样作弊：

@组件（{

  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'iwdf-icon-bell',
  template: `<fa-icon class="{{cls}}" [icon]="['fas', 'bell']"></fa-icon>`,
  styles: [`:host {
    display: inline-block;
  }`]
})
export class IconBellComponent{
  @Input() cls: string;
}

但我想知道是否还有其他方法。

有什么想法吗？

更新

我解决了这个问题：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'icon-angledown',
  template: `<fa-icon [className]="cls" [icon]="['fas', 'angle-down']"></fa-icon>`,
  styles: [`:host {
    display: inline-block;
  }`]
})
export class IconAngleDownComponent{
  @Input() cls: string = '';
}

【问题讨论】：

stackoverflow.com/questions/44870542/…的可能重复
如果根模块下的组件确保 BrowserModule 被导入。如果它在子模块中，则导入 CommonModule。在尝试使用通用指令时，缺少这些导入会给您带来错误。
Angular2 Validation Error as 'ngClass' since it isn't a known property of 'div'. (的可能重复

标签： angular font-awesome

【解决方案1】：

尝试在 NgModule "imports" 中添加 BrowserModule

@NgModule( imports: [BrowserModule] )

或

直接在ngClass中使用表达式

【讨论】：

【解决方案2】：

<i class="fa" [ngClass]="{'cls','fas-bell'}"></i>

尝试在 ngClass 中移动 fa-icon 类本身

【讨论】：