Angular 中插入一段 HTML 代码的方式大多数都会采用管道的方式实现,下面是实现思路。
- 新建一个管道
ng g pipe tohtml
装饰器中标记了管道名称
@Pipe({
name: "tohtml",
})
- 构造函数中注入Dom 消毒剂
constructor(
private _sanitizer: DomSanitizer
) { }
- 在实现函数中完成自定义的转换
transform(value: string, args?: number): SafeHtml {
let temp = '<b>' + value + '</b>';
this._sanitizer.bypassSecurityTrustHtml(temp); // 标记这是一段可信的HTML
}
- 插入 HTML 的用法
<span [innerHTML]="content | tohtml"></span>