Awesome 字体不适用于 ionic angular

Question

我正在尝试在我的 ionic 5 项目中使用 Awesome 字体我已经成功地实现了它，如果我在 html 文件中使用 if 它工作正常但我想在单击时将其替换为按钮文本旋转器。

我的html代码

<button ion-button type="submit" (click)="submitt()" class="btn-Yellow [disabled]="!loginForm.valid" [innerHTML]="btnText | safe: 'html'">
</button>

TS码

export class LoginPage implements OnInit {

  btnText: string;

  constructor() {
    this.btnText = '<span style="color:white">Login</span>';
  }

  ngOnInit() {}

  submitt(): void {
    this.btnText = '<fa-icon icon="spinner"></fa-icon>';
  }
}

我真的需要你们的帮助

Answer 1

fa-icon 是一个组件。您不能使 Angular 组件与 innerHTML 一起工作（除非它是 Web 组件）。 Angular 根本不会编译它。

解决您的问题的最简单方法是丢弃 innerHTML 并在一些标志的帮助下使用常规 html。

html

<button ion-button type="submit" (click)="submitt()" class="btn-Yellow [disabled]="!loginForm.valid">
   <span *ngIf="!loading" style="color:white">Login</span>
   <fa-icon *ngIf="loading" icon="spinner"></fa-icon>
</button>

ts

export class LoginPage implements OnInit {

  loading = false;

  submitt(): void {
    this.loading = true;
  }
}

另一种动态添加图标的方法是使用 Angular 提供的编程 API 很棒的库 https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md#programmatic-api 但我认为你不想深入研究它:)

Awesome 字体不适用于 ionic angular

Awesome font is not working on ionic angular

angular

ionic-framework

ionic5