Angular11中特殊符号字符串如何同时满足HTML显示与JSON传值格式一致

问题根因 #

Angular默认会对绑定到视图的内容做HTML安全过滤，你直接写入的<<Hello>>会被识别为未知自定义HTML标签，标签内部的Hello内容会被过滤，最终只显示外层的<>。同时你把JSON传值用的字符串和HTML渲染用的字符串混合处理，导致转义逻辑冲突。

实现方案 #

核心原则是拆分JSON传值用的原始字符串和HTML渲染用的显示字符串，两类字符串单独处理，互不干扰。

第一步：处理JSON用的原始数据 #

直接保留原始字符，不要做任何HTML实体转义，保证传给JSON的内容完全符合要求：

// 原始内容，无任何转义，专门用于JSON传值
this.DTTodaysDateforJson = '<<Hello>>';
// 拼接JSON用的完整变量，纯文本格式，不要加<br>等HTML标签
this.productDiscriptionArrayForID =  `${this.DTTodaysDateforJson} \n《DV.Product.${this.selectedID}》 \n ${this.product.productDescription}`;
console.log("JSON传值内容：", this.productDiscriptionArrayForID);
// 输出为 <<Hello>> ... 完全符合JSON要求

第二步：处理HTML页面显示内容 #

根据你使用的表单控件类型选择对应方案：

方案A：表单控件为普通input/textarea（纯文本输入）

直接把原始文本赋值给表单控件即可，文本输入框会自动把< >识别为普通字符，不会触发HTML解析：

const displayContent = `${this.DTTodaysDateforJson} \n《DV.Product.${this.selectedID}》 \n ${this.product.productDescription}`;
this.productForm.controls.des.setValue(displayContent);

方案B：表单控件为富文本编辑器（需要支持HTML换行）

需要先对特殊字符做HTML转义，再替换换行为<br>，避免Angular过滤标签内容：

1. 先在组件中注入DomSanitizer用于处理安全HTML：

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

2. 新增HTML特殊字符转义工具方法：

private escapeHtml(str: string): string {
  const escapeMap = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return str.replace(/[&<>"']/g, match => escapeMap[match]);
}

3. 处理显示内容后赋值给表单：

const rawDisplayStr = `${this.DTTodaysDateforJson} \n《DV.Product.${this.selectedID}》 \n ${this.product.productDescription}`;
// 转义特殊字符后替换换行为<br>
const htmlContent = this.escapeHtml(rawDisplayStr).replace(/\n/g, '<br>');
// 富文本编辑器支持HTML输入直接赋值即可
this.productForm.controls.des.setValue(htmlContent);
// 如果是用innerHTML直接绑定到模板，需要标记为安全内容避免Angular过滤
// const safeHtml = this.sanitizer.bypassSecurityTrustHtml(htmlContent);

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