Angular字体很棒的大小 - 无法绑定到'ngClass'，因为它不是'fa-icon'的已知属性

Question

我正在寻找一种使用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;
}

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

任何的想法 ？

UPDATE

我用它来解决：

@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 = '';
}

Answer 1

尝试在NgModule“导入”中添加BrowserModule

@NgModule(
  imports: [BrowserModule]
)

要么

直接在ngClass中使用表达式

Answer 2

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

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