web-dev-qa-db-ja.com

ngx translate / coreを使用してテキストの動的翻訳を取得できません-angular 2 typescript

問題：

Jsonファイルからの動的テキストがあります。私は次のようなtranslate.get（）メソッドを使用しています：

this.translate.get('keyInJson').subscribe(res => { 
                this.valueFromJson = res;
/*
creating an object using above text
*/
            });

これは非同期であるため、ページのレンダリング時に翻訳されたテキストを取得できません。上記のメソッドをObservables、Promises内でラップしようとしましたが、ページの読み込み中に翻訳されたバージョンのテキストを取得できません。さまざまなアプローチを試した後、翻訳されたテキストを取得できましたが、コードが複雑になり、信頼性が低下しました。

期待される/望ましい動作翻訳されたバージョンのテキストをロードする必要があります

問題の再現テキストをhtmlにハードコーディングする代わりに動的に生成してから、翻訳版をレンダリングしてみます。

環境 Angular2、TypeScript、Ionic 2

javascriptangulartypescriptionic2
11
nkadu1

@ nkadu1

instant（key：string | Array、interpolateParams？：Object）：string | Object：キー（またはキーの配列）のインスタント変換値を取得します）。このメソッドはsynchronousであり、デフォルトのファイルローダーは非同期です。 あなたはあなたの翻訳がいつロードされたかを知る責任があり、この方法を安全​​に使用できます。

const translated = this.translate.instant('keyInJson');

@ masterachTranslateHttpLoader はあなたが探しているものです。 ここに記事があります これはあなたに役立つかもしれません。

7
Halil İbrahim Karaalp

私は@ ngx-translateをしばらくの間使用しています。私は2つの方法でモジュールを使用します：

  1. パイプの使用：

{{'code_to_translate' |翻訳}}

  1. サービスの利用

const translateText：string = this.translateService.instant（ 'code_to_translate'）

翻訳サービスは、コンポーネント（またはサービス）のコンストラクターで渡す必要があります

通常、コンポーネントをロードする前にapp.ini関数で文字列の結果を宣言し、アプリケーション全体で1つの翻訳サービスのみを使用します。また、カスタムのTranslateLoaderを宣言して、任意の場所（外部API、jsonファイルなど）からの翻訳のソースを管理します。

2
Ricardo

グローバルサービスの場合：

private _valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this._valueFromJson = res;
  });
}
get valueFromJson() {
  return this._valueFromJson;
}

または：

public valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this.valueFromJson = res;
  });
}

次に、コンポーネントテンプレートで、直接バインドできます。

<div>{{ globalService.valueFromJson }}</div>

または、 同期メソッド を使用することもできます。

this.valueFromJson = translate.instant('keyInJson');
1
Francesco Colamonici

Tsで翻訳する代わりに、htmlでパイプを使用してみませんか？

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

または

<div [innerHTML]="'HELLO' | translate"></div>
0
Ari