有没有办法使用 Angular 本机国际化机制翻译绑定？

Question

问题

我正在为我的 Angular 6 应用程序实现翻译。它需要支持多种语言的应用程序的静态文本。我不需要在运行时进行动态翻译 - 我只需要生成一个应用程序，其中包含在构建期间选择的语言的文本。

Angular 拥有完整的page on internationalization，但它只关注模板中所有文本都被硬编码的情况，如下面的代码：

<p>This is a hard coded text</p>

在我的模板中几乎没有这种情况。此外，在我看来，用模板中硬编码的所有文本编写整个应用程序似乎是不可能或极其肮脏的，所以如果这是唯一可用于翻译的机制，那么它对我来说似乎完全没用。

在我的组件中，我经常将文本绑定到一些 JavaScript 变量（或者准确地说是对象属性），如下面的代码所示：

<li *ngFor="let navigationEntry of navigationEntries">
  <a [href]="navigationEntry.url">
    {{ navigationEntry.text }}
  </a>
</li>

假设变量仍然是静态的，只是存储在组件或服务中，例如：

navigationEntries: Array = [
  {
    url: "/",
    text: "Home",
  },
  {
    url: "/login",
    text: "Login",
  },
  {
    url: "/admin",
    text: "Admin panel",
  },
];

问题

有没有办法在构建期间使用 Angular 原生翻译（国际化）机制来翻译锚文本（或者实际上是 navigationEntries 成员的 text 属性）？ JavaScript 数据的结构和模板的 HTML 可以改变。

如果 Angular 原生国际化机制无法处理这个问题（但我想知道它们到底有什么用），那么还有哪些其他解决方案可以帮助实现这种翻译？我找到了ngx-translate 库，但它提供的翻译可以在运行时动态更改，理想情况下，我不想在所有翻译文本上添加动态解决方案的不必要开销。

Answer 1

是的，您可以使用 Angular 原生翻译机制来执行此操作。我们经常使用以下模式来解决 angular i18n 中缺少的动态转换：

您有一个消息数组，然后将其与 ngFor 和 ngSwitch 一起使用来模板化消息，例如：

<li *ngFor="let navigationEntry of navigationEntries">
  <ng-container [ngSwitch]="navigationEntry.text">
    <a [href]="navigationEntry.url" *ngSwitchCase="'Home'" i18n="@@home">
      Home
    </a>
    <a [href]="navigationEntry.url" *ngSwitchCase="'Login'" i18n="@@login">
      Login
    </a>
    <a [href]="navigationEntry.url" *ngSwitchCase="'Admin panel'" i18n="@@adminPanel">
      Admin panel
    </a>
  <ng-container>
</li>

它有点冗长 - 但它适用于数量惊人的用例。

注意，i18n id（@@ 后面的字符串）只是一个唯一的 id，在 xlf 翻译文件中使用。字符串可以是任何东西，如果可能的话，我使用消息本身来提高可读性和重用性。