0

问题

我正在为我的 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 原生翻译（国际化）机制来翻译锚文本（或实际上是成员的text属性）？navigationEntriesJavaScript 数据的结构和模板的 HTML 可以改变。

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

4

1 回答 1

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 翻译文件中使用。字符串可以是任何东西，如果可能的话，我使用消息本身来提高可读性和重用性。

于 2018-08-24T11:44:27.600 回答