web-dev-qa-db-ja.com

Angular 2 i18n動的/即時変換

私は、国際化のためにangular.ioクックブック（ https://angular.io/docs/ts/latest/cookbook/i18n.html#!#angular-i18n ）をフォローしました。すべてが正常に機能します。index.htmlファイルでロケールを変更すると、次のようになります。

document.locale = 'en';

しかし、AngularJSで行っていたように、これを動的に変更したいと思います。私はこれのようないくつかの解決策を見つけました：

//mycomponent.component.ts
changeLang(){
localStorage.setItem('localeId', "es");
location.reload(true);

} //I hardcoded the locale, but you get the idea

外出先でドキュメントを翻訳する方法はありますか？このソリューションは実用的ではなく、リロード時間が長いためです。ご協力ありがとうございました！

javascriptangulartypescriptinternationalization
9
Andre Debuisne

つまり、翻訳作業はAngularコンパイラによって行われるため、アプリをリロードせずにロケールを変更することはできません。

今日、公式Angular i18nを使用する場合、 2つのオプション があります。

AOTコンパイラを使用

この場合、ロケールごとに個別のバンドルが作成され、アプリケーション全体を交換する必要があります。つまり、再ロードする必要があります。

AOTコンパイラーで国際化する場合、言語ごとに個別のアプリケーションパッケージを事前にビルドし、サーバー側の言語検出またはurlパラメーターに基づいて適切なパッケージを提供する必要があります。

JITコンパイラを使用する

このアプローチはパフォーマンスが低くなりますが、必ずしも言語ごとのバンドルは必要ありません。
この場合、webpackを使用して翻訳ファイルをロードし、ブートストラップ中にAngularコンパイラに提供します。

JITコンパイラーは、アプリがロードされるときにブラウザーでアプリをコンパイルします。 JITコンパイラを使用した変換は、次の動的プロセスです。

  • 適切な言語翻訳ファイルを文字列定数としてインポートします。
  • JITコンパイラーに対応する翻訳プロバイダーの作成。
  • それらのプロバイダーでアプリをブートストラップする。

公式ドキュメントにはuseValueプロバイダーの例しかありませんが、useFactoryを使用して、構成に基づいてTRANSLATIONSとLOCALE_IDを提供できると確信しています。 。
言語の変更時にアプリを再ブートストラップする必要があります。つまり、リロードを意味しますが、ユーザーはこのバンドルをブラウザーにキャッシュしているため、リロードはかなり高速になるはずです。

とにかく、今のところ、本当に動的な翻訳を取得したい場合は、 ngx-translate を使用することをお勧めします。
translateパイプとサービスの他に、このニース 投機的ポリフィル があるため、Angular i18n。

9
JeB

JITコンパイルを使用している場合は、これを確実に実行できます。翻訳にはファクトリープロバイダーが必要です。ルートモジュールに次のようなものを追加します。

  export function localeFactory(): string {
    return (window.clientInformation && window.clientInformation.language) || window.navigator.language;
  }

  providers:
  [
    {
      provide: TRANSLATIONS,
      useFactory: (locale) => {
        locale = locale || 'en'; // default to english if no locale provided
        return require(`raw-loader!../locale/messages.${locale}.xlf`);
      },
      deps: [LOCALE_ID]
    },
    {
      provide: LOCALE_ID,
      useFactory: localeFactory
    },
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
3
Chris Halcrow

あなたはそれをチェックすることができます、私にとってはそれは完璧に動作し、素晴らしいパフォーマンスを持っています（ロード時間もリロードもない即時翻訳）：

https://github.com/ocombe/ng2-translate

次に、ローカルストレージなどを使用して言語を設定できます。

translateService.use(window.localStorage.getItem('language'));

翻訳を1つのファイルに設定し、翻訳をJSON形式で注文できます（コンポーネントごとに1つのオブジェクトをカプセル化します）。

"PASSWORD_CONFIRM": {
    "TITLE": "Merci !",
    "DESCRIPTION": "Votre nouveau mot de passe a bien été enregistré. Vous pouvez désormais accéder à la plateforme !",
    "BUTTON": "Entrer sur la plateforme"
  },
  ...

次に、次のようにHTMLにテキストを設定できます。

  <div class="title">{{'PASSWORD_CONFIRM.TITLE' | translate}}</div>
  <div class="description">
      {{'PASSWORD_CONFIRM.DESCRIPTION' | translate}}
  </div>
2
Alex Beugnet