Angular 9 - 如何在 HTML 页面内动态添加一个垫子图标？

Question

我有一个关于 "@angular/core": "~9.1.6", 和 "@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));
    }

}

测试class：

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>

注意：没有管道，它也returns相同的结果

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>

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

Angular 9 - 如何在 HTML 页面内动态添加一个垫子图标？

Angular 9 - How to add a mat-icon dynamically inside HTML page?

html

javascript

angular-material

angular-material2

angular