Angular 9 - 如何在 HTML 页面中动态添加 mat-icon？答案

【问题标题】：Angular 9 - How to add a mat-icon dynamically inside HTML page?Angular 9 - 如何在 HTML 页面中动态添加 mat-icon？
【发布时间】：2020-09-21 09:29:06
【问题描述】：

我对@987654322@ 和"@angular/material": "^9.2.3", 有一个简单的问题，我需要将随机的<mat-icon>done</mat-icon> 元素添加到HTML 页面。我尝试将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 页面？

【问题讨论】：

解决该问题的另一种方法是使用 ComponentFactoryResolver 并简单地动态创建和插入 MatIconComponent 的实例。查看here了解更多详情。
@TotallyNewb 或者使用自定义元素更简单。

标签： javascript html angular angular-material angular-material2

【解决方案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>

注意：支持的网络浏览器：

【讨论】：