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本机翻译（国际化）机制来翻译锚文本（或实际上是text成员的navigationEntries属性）？ 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转换文件中使用。字符串可以是任何东西，如果可能，我会使用消息本身，以提高可读性和重用性。

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

问题

问题

1 个答案: