Angular结合ngx-translate时报双模板插值语法错误如何解决

你写的{{ {{link.label}} | translate }}属于语法错误：Angular里的{{ }}是插值的边界标记，边界内部直接写变量、管道、运算表达式就行，根本不需要在里面再套一层{{ }}，解析器碰到嵌套的插值符会直接抛错。

直接把动态变量接在管道前面，放在同一对插值符里就可以，改完的列表模板代码：

<mat-nav-list>
  <mat-list-item *ngFor="let link of links">
    <a matLine href="{{link.url}}"> {{ link.label | translate }} </a> 
  </mat-list-item>
</mat-nav-list>

TS侧的代码完全不用改，只要保证你links里配置的label值和国际化文件里的翻译key一一对应就行——比如你现在写的label: "users"，只要翻译资源里有users对应的各语言文案，就能正常显示翻译结果。

• 你现在用的href="{{link.url}}"是合法写法，也可以换成Angular标准属性绑定写法[href]="link.url"，两种写法效果完全一样，跟着团队规范选就行。
• 要是后续翻译需要传动态参数，直接在管道后面补参数就可以，写法是{{ link.label | translate: {参数名: 参数值} }}，不用改整体结构。

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