有没有一种方法来翻译绑定与有角度的本机国际化机制？

Question

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

<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",
  },
];

在构建期间，是否有方法使用角度本机翻译（国际化）机制来翻译锚文本（或者NavigationEntries成员的text属性）？JavaScript数据的结构和模板的HTML可以更改。

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

Answer 1

是的，您可以使用Angular native translation Mechanicim来完成此操作我们经常使用以下模式来绕过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>

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