web-dev-qa-db-ja.com

ngx-tsファイルの動的テキストで翻訳

Ionic 3アプリの国際化に ngx-translate を使用しています。 pipeコードでHTMLをうまく使用しました。しかし今、私はtsファイルで以下のような状況にあります。このような動的なユースケースをngxで処理する方法を教えてください。

 updateApi(topic) {
     this.showToast(`Topic ${topic.name} subscribed!`);//this is the dynamic text
  }

 showToast(message) {
        let toast = this.toastCtrl.create({
            message: message,
            duration: 3000
        });
        toast.present();
    }

ここでの問題は、${topic.name}の値が前もってわからないことです。では、どうすればkey/valuejsonファイルでi18nを指定できますか？または私はここで何かが欠けていますか？

angulartypescriptionic3ngx-translate
7
Sampath

コンポーネントに翻訳サービスを挿入する必要があります。

constructor(private translate: TranslateService) {}

そしてそれに電話をかけると、それは観察可能なものを返します：

this.translate.get('TOPIC', {value: topic.name}).subscribe(res => {
      showToast(res);
});

翻訳ファイルでは、次のように宣言する必要があります。

{
  "TOPIC": "Topic {{value}} subscribed!"
}

[〜＃〜]更新[〜＃〜]

@Exari Constantinが言ったように、TranslateServiceのinstantメソッドを使用して、プログラムでキーを翻訳することもできます。これは次のようになります：

showToast(this.translate.instant('TOPIC', {value: topic.name}));
11
Enima

次の方法でも実行できます。

this.showToast(this.translate.instant('TOPIC', {value: ${topic.name}}));
4
Exari Constantin