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

Posted 2023-03-13

【中文标题】ngx-translate 与 ts 文件上的动态文本

【英文标题】：ngx-translate with dynamic text on ts file

【发布时间】：2018-02-19 17:05:52

【问题描述】：

我在 Ionic 3 应用程序上使用 ngx-translate 进行国际化。我在html 代码上很好地使用了pipe。但是现在我在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 的值。那么我怎样才能在i18n json 文件上提供key/value 呢？还是我在这里遗漏了什么？

【参考方案1】：

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

constructor(private translate: TranslateService) 

并在您的翻译文件中声明如下：

  "TOPIC": "Topic value subscribed!"

那么你可以选择以下方式之一：

立即翻译：

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

用 observable 翻译

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

直接在模板中翻译

 'TOPIC' | translate: value: topic.name 

【讨论】：

这里的问题是我不知道$topic.name 的值。那么我怎样才能在i18n json 文件上提供key/value 呢？还是我在这里遗漏了什么？

我编辑了我的帖子来回答你的问题。希望对您有所帮助。

但是当语言发生变化时，默认语言消息仍然会出现。

【参考方案2】：

你也可以这样做：

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

【讨论】：

但是当语言发生变化时，默认语言消息仍然会出现。