Angular模板字面量中如何使用innerHTML插入带换行的用户输入内容

问题原因 #

1. Angular的模板绑定语法（如[innerHTML]）仅在Angular模板（.html文件、@Component的template属性内容）的编译阶段会被解析处理，你运行时手动拼接的普通HTML字符串不会经过Angular模板编译流程，因此绑定语法会被当作普通文本处理，不会生效。
2. DomSanitizer.bypassSecurityTrustHtml返回的是SafeValue类型的对象，并非普通字符串，直接插入模板字面量拼接时会调用其默认toString方法，因此抛出SafeValue must use [property]=binding报错。

解决方案 #

方案1：保留手动拼接HTML字符串的实现

如果你的场景需要最终输出纯HTML字符串（如导出静态页面、传给第三方渲染等），按以下步骤处理：

• 优先对用户输入的内容做HTML特殊字符转义，避免XSS注入风险，之后给包裹标签添加white-space: pre-wrap样式即可保留换行，无需额外处理innerHTML。
  示例代码：

returnAsHtml(myField : MyFieldModel) {
  // 通用HTML特殊字符转义方法
  const escapeHtml = (str: string) => {
    return str.replace(/[&<>"']/g, match => {
      const escapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
      return escapeMap[match];
    });
  }

  let html = '';
  const escapedDesc = escapeHtml(myField.description);
  html += `<tr>
    <td class="text-center">${myField.id}</td>
    <td class="text-center">${myField.name}</td>
    <td class="text-center" style="white-space: pre-wrap">${escapedDesc}</td>
  </tr>`;

  return html;
}

如果确实需要允许用户输入的内容携带合法HTML标签，可通过DomSanitizer的sanitize方法将SafeValue转为普通字符串后再拼接：

import { SecurityContext } from '@angular/core';
// 拼接逻辑
const safeDesc = this.sanitizer.bypassSecurityTrustHtml(myField.description);
const htmlDesc = this.sanitizer.sanitize(SecurityContext.HTML, safeDesc);
html += `<td class="text-center">${htmlDesc}</td>`;

注意：放开HTML渲染会有XSS风险，需严格校验用户输入内容。

方案2：改用Angular原生模板绑定（更推荐）

如果拼接的HTML是要在当前Angular应用内渲染，完全不需要手动拼接HTML字符串，直接用Angular自带的模板绑定语法即可，更安全易维护：
组件模板代码示例：

<tr *ngFor="let field of yourFieldList">
  <td class="text-center">{{field.id}}</td>
  <td class="text-center">{{field.name}}</td>
  <td class="text-center" style="white-space: pre-wrap" [innerHTML]="field.description"></td>
</tr>

Angular默认会自动对[innerHTML]绑定的内容做不安全内容过滤，无需手动处理安全问题。

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