Angular：如何在HTML模板的插值表达式中嵌套输出变量值

Angular 插值语法{{ }}不支持嵌套使用，{{ }}内部可直接编写合法JS表达式，无需额外嵌套插值标记，你的原有写法违反了语法规则因此报错。

• 方法1：字符串拼接
  使用+运算符直接拼接固定前缀和动态变量，通用度最高：

<!-- 基础插值场景 -->
{{ 'SUB-MENU-PLACES.' + type }}

<!-- 搭配ngx-translate等翻译管道使用的场景（从截图看你大概率是翻译场景） -->
{{ 'SUB-MENU-PLACES.' + type | translate }}

• 方法2：ES6模板字符串
  使用反引号包裹内容，通过${}插入变量，写法更易读：

<!-- 基础插值场景 -->
{{ `SUB-MENU-PLACES.${type}` }}

<!-- 搭配翻译管道使用 -->
{{ `SUB-MENU-PLACES.${type}` | translate }}

• 需保证type变量的值和SUB-MENU-PLACES下定义的字段后缀完全匹配，否则会无法读取到对应值
• 若存在type为空的场景，可增加兜底逻辑避免异常，例如{{ 'SUB-MENU-PLACES.' + (type || '') }}

内容的提问来源于stack exchange，提问作者Andrés Cabrera Diaz