如何在Angular中显示花括号符号作为文本内容？

你可以用以下几种更优的方式替代innerText：

• 使用ngNonBindable指令：这是Angular官方提供的专门用来跳过元素内容编译的指令，直接写你要显示的内容就行，最直观：

  <div ngNonBindable>{{hello curly brackets symbol}}</div>
  

• 使用HTML实体编码：把花括号换成对应的HTML实体，左大括号是{，右大括号是}，适合纯静态文本场景：

  <div>&#123;&#123;hello curly brackets symbol&#125;&#125;</div>
  

• 嵌套插值表达式：如果需要动态生成包含花括号的内容，可以在外层插值里直接写带花括号的字符串：

  <div>{{ '{{hello curly brackets symbol}}' }}</div>
  

这几种方法都比innerText更贴合Angular的使用习惯，不需要额外处理字符串绑定，可读性也更强。

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