有沒有辦法使用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轉換文件中使用。 字符串可以是任何東西，如果可能的話，我會使用消息本身來提高可讀性和重用性。