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

问题描述

我对"@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页面？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）