Удивительный шрифт не работает на ioni c angular

Question

Я пытаюсь использовать Awesome шрифт в моем проекте ioni c 5. Я успешно реализовал его, если я использую, если в файле html он работает нормально, но я хочу заменить его на текст кнопки при нажатии на спиннер. .

Мой 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. Angular не скомпилирует его вообще.

Самый простой способ решить вашу проблему - выбросить внутренний HTML и использовать вместо него обычный 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;
  }
}

Еще один способ динамического добавления значка - использовать progammati c API, предоставляемый Angular Awesome библиотека https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md#programmatic -api Но я не думаю, что вы хотите копаться в этом:)