如何在Angular的ngx-translate翻译字符串中嵌入组件？

当使用ngx-translate时，直接通过[innerHTML]="'key' | translate"渲染包含Angular指令（如routerLink）的文本会失效——因为Angular不会对innerHTML插入的HTML进行编译，routerLink这类指令无法被解析生效。

下面提供两种可靠的解决方案：

方法1：拆分翻译文本（推荐） #

将包含组件/指令的内容拆分为多个翻译键，在模板中直接组合Angular元素：

1. 在翻译JSON文件（如en.json）中定义拆分后的文本：

{
  "contact_text_prefix": "你可以在我们的",
  "contact_link_label": "联系页面",
  "contact_text_suffix": "找到联系邮箱。"
}

2. 组件模板中直接组合：

<p>
  {{ 'contact_text_prefix' | translate }}
  <a routerLink="/contacts">{{ 'contact_link_label' | translate }}</a>
  {{ 'contact_text_suffix' | translate }}
</p>

这种方式由Angular完整编译模板，routerLink能正常触发路由跳转，同时翻译逻辑清晰易维护。

方法2：参数化翻译+模板引用 #

如果不想拆分过多翻译键，可通过参数化翻译结合模板引用插入Angular元素：

1. 翻译JSON中用占位符标记插入位置：

{
  "contact_full_text": "你可以在我们的{{contactLink}}找到联系邮箱。"
}

2. 组件模板中使用*translate结构指令传递模板引用：

<p>
  <ng-container *translate="key: 'contact_full_text'; values: { contactLink: linkTemplate }"></ng-container>
</p>

<ng-template #linkTemplate>
  <a routerLink="/contacts">{{ 'contact_link_label' | translate }}</a>
</ng-template>

注意：避免用innerHTML渲染带Angular指令的内容，除非手动通过代码处理指令逻辑（如监听点击事件调用路由跳转），但这种方式不够优雅，不推荐。

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