Angular中如何在div元素内正常显示输出花括号{}

Angular 模板引擎默认会将花括号（尤其是双花括号组合）识别为框架内置的插值语法标记，直接在模板里写未做处理的花括号会触发语法解析报错，替换成圆括号后不触发语法规则所以错误消失。如果仅需要在页面原样输出花括号文本、不使用插值功能，可选择以下任意一种方案实现：

• 方案1：使用ngNonBindable指令标记目标节点
  给需要展示花括号的<p>标签加上ngNonBindable属性，会告诉Angular编译器跳过该节点及其子节点的所有语法解析，直接原样渲染内部文本，是最简便的处理方式：

  <p>Pattern Format (All Parameters are Optional):</p>
  <p ngNonBindable>{Parameter: 1, Parameter 2}</p>
  

• 方案2：使用HTML实体编码转义花括号
  不依赖Angular专属指令，直接把花括号替换为对应的HTML实体编码即可，Angular渲染时会自动把实体解码为对应字符展示，不会识别为语法标记：
  左花括号{对应实体：{
  右花括号}对应实体：}
  示例代码：

  <p>Pattern Format (All Parameters are Optional):</p>
  <p>&#123;Parameter: 1, Parameter 2&#125;</p>
  

• 方案3：通过textContent属性绑定输出文本
  把要展示的整段文本作为字符串值绑定到标签的textContent属性上，绑定的字符串内容不会被模板引擎解析为插值语法：

  <p>Pattern Format (All Parameters are Optional):</p>
  <p [textContent]="'{Parameter: 1, Parameter 2}'"></p>
  

以上三种方案都可以在页面输出你需要的结果，不会抛出模板解析错误：

Pattern Format (All Parameters are Optional):
{Parameter: 1, Parameter 2}

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