Angular i18n：文本中的图标

Question

在 Angular i18n 中处理包含图标（或其他不得翻译的任意 HTML）的文本的正确方法是什么？例如：

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

有没有办法让 Angular 用一些未翻译的占位符来标记它？

Answer 1

是的，您可以使用角度 i18n 标记和占位符。类似这样：

  <p i18n="@@allowAlert">
     Allow alert <ph name="icon"><mat-icon>toggle_on</mat-icon></ph> to modify the settings.
  </p>

或者您可以使用 Angular i18n- 占位符属性

<p i18n="@@allowAlert">
   Allow alert <mat-icon i18n-name="icon">toggle_on</mat-icon> to modify the settings.
</p>

通过使用 < ph> 标签或 i18n-name 属性，Angular 在翻译过程中保持任意 HTML（如图标或标签）完整，只允许翻译其周围的文本。