angular 想通过接收到的json字符串生成html页面，已经转义了，但是总是只显示字符串不显示标签。

Question

问题描述

angular-material 的项目，想改成通过后台传过来的json字符串动态生成页面标签，没做过,就想先试试简单的

htmlString = "<div>1111111</div>"
页面直接 {{ htmlString }}
页面显示字符串

之后又改成过的字符串
页面还是显示字符串，请问有做过的吗？ 为什么只显示字符串

Answer 1

写一个安全转化管道类似：

import { Pipe, PipeTransform } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'

/**
 * 安全转化innerhtml
 */
@Pipe({ name: 'safeInnerHtml' })
export class SafeInnerHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

模版直接：

<div [innerHTML]="xxx | safeInnerHtml"></div>

Answer 2

这个是因为安全问题，angular 过滤掉了直接插入html，官方文档有介绍，需要特殊的api ，参见官网https://angular.cn/guide/secu...

Answer 3

应该使用element.nativeElement.innerHTML = htmlString