CSS styles 不適用於 Html 在 ZC31C335EF37283CDE4512B+ 中添加的 innerHtml 指令

Question

我正在嘗試實現一個簡單的加載圖標指令：

import { Directive, ElementRef, Renderer2, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[appLoading]',
})
export class LoadingDirective implements OnChanges {
  @Input() appLoading: boolean;

  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }

  ngOnChanges() {
    if (this.appLoading) {
      this.renderer.addClass(this.elRef.nativeElement, 'loading-wrap');
      this.elRef.nativeElement.innerHtml = '<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>';

    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'display', 'none');
    }
  }

}

在我的模板中，我有：

<div [appLoading]="isLoading"></div>

但它看起來像 Angular 不適用我的 styles 加載微調器在 styles.ZC7A628CBA22E28EB16AZB5 內容添加到 innerHtmlA5 styles 用於 class 'loading-wrap' 的主要元素。

Answer 1

錯誤是由innerHtml引起的，顯然應該是innerHTML

this.elRef.nativeElement.innerHTML = '<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>';