angular – ngx-translate .instant返回键而不是值

发布时间：2020-12-17 17:33:44 所属栏目：安全来源：网络整理

导读：我试图通过使用translate.instant(参数)创建一个接受字符串键并返回翻译后的字符串值的方法.问题是它返回键(参数).通常,如果找不到翻译,则返回此选项.我认为问题是在加载器加载转换之前调用方法. 我的app.module.ts导入： TranslateModule.forRoot({ loader:

我试图通过使用translate.instant(参数)创建一个接受字符串键并返回翻译后的字符串值的方法.问题是它返回键(参数).通常,如果找不到翻译,则返回此选项.我认为问题是在加载器加载转换之前调用方法.

我的app.module.ts导入：

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,useFactory: (createTranslateLoader),deps: [HttpClient]
  }
})

createTranslateLoader函数：

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http,'./assets/i18n/','.json');
}

在我的app.component中：

constructor(public translate: TranslateService){
   translate.setDefaultLang('en');
   translate.use('en');
}

当我使用管道翻译html时,它可以正常工作.

解决方法

您正在使用TranslateHttpLoader,它在要求翻译时发出HTTP请求 – translate.use(‘en’).如果在HTTP调用返回之前调用instant(messageKey)方法,则ngx-translate将返回密钥,因为它还没有翻译.所以你应该使用get(messageKey)方法来获得翻译 – 它是异步的并返回一个Observable：

this.translateService.get('hello.world').subscribe((translated: string) => {
    console.log(res);
    //=> 'Hello world'

    // You can call instant() here
    const translation = this.translateService.instant('something.else');
    //=> 'Something else'
});

只有当您确定已经加载了翻译时(例如在代码示例中),您才可以使用本方法,或者您可以编写自定义同步转换加载程序并在任何地方使用即时.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!