Angular i18n：如何处理文本中含无需翻译的图标或HTML？

处理包含图标或其他无需翻译HTML的文本，最稳妥的有两种方案，既能保证翻译语境完整，又能让HTML部分不参与翻译流程：

方案1：拆分文本与HTML元素 #

将需要翻译的文本拆分成独立片段，仅给文本部分添加i18n标记，HTML元素直接保留在模板中：

<p>
  <span i18n>Allow alert </span>
  <mat-icon>toggle_on</mat-icon>
  <span i18n> to modify the settings.</span>
</p>

这种方式简单直接，但要注意：如果拆分后的文本片段在目标语言中需要调整语序，可能会破坏句子连贯性，更适合结构简单、语序不易变化的场景。

方案2：使用占位符（推荐） #

通过占位符将HTML元素嵌入翻译文本中，翻译人员能看到完整的句子结构，仅占位符代表无需翻译的部分，同时HTML元素完全不参与翻译流程：

模板代码示例： #

<p i18n="@@allowAlertModifySettings">
  Allow alert <ng-container [i18n-placeholder]="iconTpl">{icon}</ng-container> to modify the settings.
</p>

<ng-template #iconTpl>
  <mat-icon>toggle_on</mat-icon>
</ng-template>

说明： #

1. @@allowAlertModifySettings是自定义消息ID，用于固定翻译条目，避免自动生成ID带来的变动；
2. {icon}是翻译文本中的占位符，翻译人员会看到完整句子Allow alert {icon} to modify the settings.，清楚占位符在句子中的位置；
3. ng-template定义了无需翻译的图标内容，通过[i18n-placeholder]绑定到占位符上，最终渲染时会替换成实际的图标元素。

这种方案能最大程度保留翻译语境，适合复杂句子或需要保证语序灵活性的场景，任何无需翻译的HTML元素（按钮、容器等）都可以用同样方式处理。

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