web-dev-qa-db-ja.com

Angularのオブジェクトであるコンポーネント入力でi18nを使用するにはどうすればよいですか？

次のように、入力が子コンポーネントで定義されている状況があります。

interface MyValues {
   text: string;
   path: string;
   someOtherValue: string;
}

@Input() myValues: MyValues;

次のような入力を介して、親から子コンポーネントにmyValuesを渡す必要があります。

<my-child-component [myValues]="myValues" />

これは単純なデータタイプの入力ではないため、Angular docs here で推奨されているようにi18nの属性スタイルを使用できません。これは複数の値を持つオブジェクトです。そのため、子コンポーネントに渡されるため、翻訳できません（何か不足している場合を除きます）。

子コンポーネントには、次のようなコードがあります。

<span *ngFor="let myValue of myValues">
   <a>{{myValue.Text}}</a>
</span>

通常、私がやりたいのは、次のように翻訳する必要があるアンカーにIDを割り当てることです。

<a i18n="@@myChildComponent_text">{{myValue.Text}}</a>

これの問題は、翻訳対象の@@myChildComponent_textという名前の翻訳ファイルに正確にoneフィールドを作成することです。ただし、この子コンポーネントに渡されるこのオブジェクトは、myValuesの内部の値が動的であるため、リテラルの変換は渡されるものによって異なります。

私の質問は、オブジェクトを子コンポーネントの入力に渡すときに、i18n Angular国際化機能と@@idカスタムIDを引き続きどのように活用するかです。翻訳が必要なさまざまな物理的価値がありますか？

angularinternationalizationangular-cliangular-i18n
4
atconway

動的フィールドは、角度i18nを使用して変換できません。結局それは何が起こるかを置き換える単純なテキストだからです。

単純なテキストを含む属性をHTMLタグに追加します。 ng extractコマンドは、ファイル（XLIFF 1.2（デフォルト）、XLIFF 2、XMLメッセージバンドル（XMB））を作成します。これは、さまざまなツール（通常、これはトランスレーターによって行われます）で使用して、新しい翻訳済みファイルを作成できます。ファイル。各言語の構成を使用してangular.jsonを拡張し、使用する翻訳ファイルをangularに指定できます。たとえば、フランス語：

"configurations": {
...
"fr": {
  "aot": true,
  "outputPath": "dist/my-project-fr/",
  "i18nFile": "src/locale/messages.fr.xlf",
  "i18nFormat": "xlf",
  "i18nLocale": "fr",
  ...
}

ng-build --configuration=frAngularを使用すると、静的テキストが翻訳ファイルのテキストに置き換えられます。言語ごとに個別のアプリケーションが構築されます。アプリをデプロイすると、さまざまなURLを使用してさまざまな言語を処理します。フランス語の場合はHost/my-app/fr、ドイツ語の場合はHost/my-app/de。それぞれがアプリケーションの特定の翻訳済みビルドを指します。

このアプローチの欠点は、静的なテキストでのみ機能するため、動的な値を処理できないことです。そのため、このシナリオを処理するにはサードパーティのライブラリを使用する必要があります。一般的なライブラリは ngx-translate です。 jsonファイルに対してIDを解決できる場所。複数の翻訳ファイルを使用したい場合は、ngx-translateと組み合わせて ngx-translate-multi-http-loader を使用することもできます。

ほとんどの場合、i18nをngx-translate（または他の同様のライブラリ）と組み合わせて、完全な多言語サポートを取得します。

1
J. S.

ngx-translatehttps://github.com/ngx-translate/core を使用する必要があります。

翻訳を定義する：TranslateModuleをインポートしたら、TranslateHttpLoaderでインポートされるjsonファイルに翻訳を配置できます。次の翻訳はen.jsonに保存する必要があります。

{
    "HELLO": "hello {{value}}"
}

setTranslationを使用して翻訳を手動で定義することもできます。

translate.setTranslation('en', {
    HELLO: 'hello {{value}}'
});

TranslateParserはネストされたJSONオブジェクトを理解します。つまり、次のような翻訳が可能です。

{
    "HOME": {
        "HELLO": "hello {{value}}"
    }
}

service、pipe、またはdirective：TranslateService、TranslatePipeのいずれかを使用できますまたはTranslateDirectiveを使用して翻訳値を取得します。

serviceを使用すると、次のようになります。

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

これは、パイプでそれを行う方法です：

<div>{{ 'HELLO' | translate:param }}</div>

そしてあなたのコンポーネントでこのようにparamを定義します：

param = {value: 'world'};

これはディレクティブの使用方法です。

<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>

または、要素のコンテンツをキーとして使用することでさらに簡単になります。

<div translate [translateParams]="{value: 'world'}">HELLO</div>
0
KLTR