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

Question

问题

我正在为Angular 6应用程序实现翻译。 它需要支持多种语言的应用程序静态文本。 我在运行时不需要动态翻译-我只需要使用在构建过程中选择的语言生成带有文本的应用即可。

Angular的整个页面都是关于国际化的 ，但是它只专注于所有文本都在模板中进行硬编码的情况，例如以下代码：

<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本机转换机制来执行此操作。 我们经常使用以下模式来解决角度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转换文件中使用。 字符串可以是任何东西，如果可能的话，我会使用消息本身来提高可读性和重用性。