Angular 9-如何在HTML页面内动态添加Mat-icon？

Question

我对"@angular/core": "~9.1.6",和"@angular/material": "^9.2.3",有一个简单的问题，我需要在HTML页面中添加随机的<mat-icon>done</mat-icon>元素。我尝试将DomSanitizer与管道一起使用，但不起作用。

通过管道允许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));
    }

}

测试类：

export class TableComponent implements OnInit {

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

}

HTML页面：

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

但是在WebBrowser上生成的HTML没有<mat-icon>元素，仅包含：

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

注意：如果没有管道，它也会返回相同的结果

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

如何添加完整的<mat-icon>done</mat-icon> HTML元素以输出HTML页面？

Answer 1

通过将MatIcon组件注册为自定义元素，您可以轻松实现：

ng add @angular/elements

app.component.ts：

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

然后，您可以显示自定义的受信任的HTML（使用您描述的管道）：

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

NB：受支持的Web浏览器：