Angular 12嵌套文本插值：含嵌套花括号的字符串如何正确绑定渲染

问题原因 #

Angular的{{}}插值语法只会在模板编译阶段解析，组件类中定义的字符串里的{{}}会被当作普通文本处理，不会触发二次插值解析，因此直接绑定包含{{}}占位符的字符串无法得到预期的变量替换效果。

实现方案 #

方案1：静态模板场景用ES6模板字符串 #

如果消息模板是固定写在前端代码中的，直接用ES6模板字符串完成变量拼接即可，无需依赖Angular的插值能力：

// 组件类代码
name = 'Steven';
// 用反引号定义模板字符串，${} 直接引入组件变量
greeting = `Hi, ${this.name}!`;

模板绑定不需要修改：

<div [innerHtml]="greeting"></div>

方案2：动态模板场景自定义插值替换方法 #

如果消息模板是动态获取的（比如从后端接口返回、可配置的系统消息），可以自己实现占位符替换的工具方法，支持多变量替换：

1. 首先在组件中新增通用插值替换方法：

// 工具方法：传入模板字符串和变量映射表，返回替换后的最终字符串
interpolate(tpl: string, variables: Record<string, any>): string {
  return tpl.replace(/{{(\w+)}}/g, (_, key) => variables[key] ?? '');
}

2. 动态生成渲染内容：

name = 'Steven';
unreadCount = 3;
// 模拟从后端获取的动态消息模板
dynamicTemplate = 'Hi, {{name}}! 你有{{unreadCount}}条未读消息~';

// 替换变量得到最终字符串
greeting = this.interpolate(this.dynamicTemplate, {
  name: this.name,
  unreadCount: this.unreadCount
});

注意事项 #

如果动态模板中包含自定义HTML标签且你确认内容安全，可以通过DomSanitizer绕过Angular的默认XSS安全校验，避免HTML标签被转义：

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

constructor(private sanitizer: DomSanitizer) {}

// 处理安全HTML
greeting = this.sanitizer.bypassSecurityTrustHtml(
  this.interpolate(this.dynamicTemplate, {name: this.name})
);

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