Angular 5：如何将服务器返回的HTML字符串作为HTML元素插入？

要把服务器返回的转义HTML字符串转换成页面上的真实HTML元素，Angular 5提供了安全且规范的实现方式，核心是利用DomSanitizer服务处理内容安全，再结合属性绑定完成渲染，具体操作如下：

步骤1：导入并注入DomSanitizer服务 #

首先在你的组件文件中，从@angular/platform-browser导入DomSanitizer和SafeHtml类型，然后在组件构造函数中注入这个服务：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 模拟从服务器获取的转义HTML字符串
  rawHtmlString = '<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr></tbody></table>';
  safeHtmlContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 将原始HTML标记为安全可渲染内容
    this.safeHtmlContent = this.sanitizer.bypassSecurityTrustHtml(this.rawHtmlString);
  }
}

步骤2：在模板中渲染安全HTML #

接着在组件的模板文件（.html）里，使用[innerHTML]属性绑定来渲染经过净化的HTML内容：

<!-- 通过属性绑定渲染真实HTML元素 -->
<div [innerHTML]="safeHtmlContent"></div>

关键安全提醒 #

Angular默认会对所有动态插入的HTML做转义处理，这是为了防范XSS跨站脚本攻击。只有当你完全信任服务器返回的HTML内容（比如内容由自身系统生成，无用户输入风险）时，才应该使用bypassSecurityTrustHtml跳过安全检查。如果内容来自不可信来源，绝对不要这么做，否则会带来严重的安全隐患。

内容的提问来源于stack exchange，提问作者Feroz Siddiqui