Angular 9 - 如何在 HTML 頁面中動態添加一個墊子圖標？

Question

我有一個簡單的問題"@angular/core": "~9.1.6", and "@angular/material": "^9.2.3", ，我需要添加隨機<mat-icon>done</mat-icon>元素到 HTML 頁面。 我嘗試將DomSanitizer與 pipe 一起使用，但它不起作用。

Pipe 允許 HTML 標簽：

@Pipe({
    name: 'booleanToIcon'
})
export class BooleanToIconPipe implements PipeTransform {

    constructor(private domSanitizer: DomSanitizer) {}

    transform(value: string) {
        return this.domSanitizer.sanitize(SecurityContext.HTML, this.domSanitizer.bypassSecurityTrustHtml(value));
    }

}

測試class：

export class TableComponent implements OnInit {

    test:string = '<div><h1><mat-icon>done</mat-icon></h1></div>';

}

HTML 頁面：

Test:
<span [innerHTML]="test | booleanToIcon"></span>

但是在瀏覽器上生成的 HTML 沒有<mat-icon>元素，只包含：

<div><h1>done</h1></div>

注意：沒有pipe，也返回同樣的結果

Test:
<span [innerHTML]="test"></span>

如何將完整的<mat-icon>done</mat-icon> HTML 元素添加到 output HTML 頁面？

Answer 1

通過將MatIcon組件注冊為自定義元素，您可以輕松實現：

ng add @angular/elements

應用程序組件.ts：

  constructor(
    private injector: Injector,
  ) {
    const matIconElement = createCustomElement(MatIcon, { injector: this.injector });
    customElements.define('mat-icon', matIconElement);
  }

然后，您可以顯示自定義受信任的 HTML（使用您描述的 pipe）：

<div [innerHTML]="customHtml | trustHtml"></div>

注意：支持 web 瀏覽器：