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'.

我知道我可能会作弊：

@Component（{

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

Answer 1

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

@NgModule( imports: [BrowserModule] )

OR

直接在ngClass中使用表达式

Answer 2

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

尝试在ngClass中移动fa-icon类

角形字体大小调整-无法绑定到“ ngClass”，因为它不是“ fa-icon”的已知属性

更新

2 个答案: