JSS Angularサンプル アプリの翻訳と言語
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSSで作成されたAngularアプリケーションは、複数の言語でデータを表示できます。
新しい言語を追加する
Angularサンプル アプリケーションには、英語とデンマーク語の両方のサンプル コンテンツが含まれており、切断モードでは 言語を簡単に切り替えることができます。デンマーク語の言語レイヤーをインポートして他のモードで使用するには、次の項目をデプロイする必要があります。
jss deploy items --language da-DK -c -d代替言語をSitecoreにデプロイするには、まずその言語をSitecoreに登録する必要があります。未登録の言語をインポートするとエラーが発生します。
ngx-translateライブラリの使用
Sitecoreディクショナリを動的にロードして利用するために、Angularサンプルでは、組み込みのコンパイル時Angular翻訳サポートではなく、ngx-translateライブラリを使用します。
他のライブラリやアプローチを使用することもできますが、このライブラリはカスタムTranslateLoader実装を使用できるため、クライアント側とサーバー側の両方でSitecoreディクショナリを簡単に使用できます。
ngx-translateの初期化は、src/app/app.component.tsのメインアプリコンポーネントにあります。これには、JssContextServiceの現在の言語状態に基づいて表示される言語を切り替えるロジックが含まれ、ngx-translateライブラリが言語の状態を現在のルートの言語と同期させることができます。
ngx-translateライブラリのローダーは、クライアント レンダリングとサーバー レンダリングでそれぞれsrc/app/app.module.tsとsrc/app/app.server.module.tsで異なる方法で初期化されます。
ngx-translateライブラリで変換された値を使用するには、いくつかのメカニズムがあります。詳細については、ngx-translateのドキュメントを参照してください。
翻訳ローダー
JSS Angularサンプル・アプリケーションは、いくつかの翻訳ローダーを定義して使用します。これらはsrc/app/i18nディレクトリにあります。
JssTranslationLoaderサービス
この実装は、ヘッドレス サービスが提供するディクショナリ サービスからSitecoreディクショナリを読み込みます。これは、クライアントとサーバーの両方のレンダリング中にフォールバックとして機能します。
JssTranslationServerLoaderサービス
この実装は、JSS_SERVER_TO_SSRインジェクション トークンを介してSitecoreがサーバー レンダリング中に提供するviewBagデータからディクショナリを読み込もうとします。JSSアプリケーションを実行する場合、Sitecoreは便宜上、デフォルトでビュー バッグにディクショナリを提供します。ディクショナリが見つからない場合、ローダはフォールバックローダ(設定どおり、JssTranslationLoaderService)からディクショナリを取得しようとします。取得したディクショナリは、クライアント アプリケーションで使用するためにTransferStateにも配置されます。
JssTranslationClientLoaderサービス
この実装は、TransferStateからディクショナリを読み込もうとし、指定されたフォールバックローダー(設定どおり、JssTranslationLoaderService)にフォールバックします。