Question

我在Ionic 3 app上使用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/value i18n文件中为json提供该文件？或者我在这里遗失了什么？

Answer 1

您必须在组件中注入翻译服务：

constructor(private translate: TranslateService) {}

并调用它，它将返回一个可观察的：

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

在您的翻译文件中，您必须声明如下内容：

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

<强>更新

正如@Exari Constantin所说，您还可以使用TranslateService的即时方法以编程方式转换密钥。它看起来像这样：

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

Answer 2

您也可以这样做：

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

ngx-translate与ts文件上的动态文本

2 个答案: