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

Question

我正在尝试创建一种方法，该方法将接受字符串键并使用 translate.instant(parameter) 返回翻译后的字符串值。问题是它返回键(参数)。如果找不到翻译，通常会返回。我认为问题是在加载器加载翻译之前调用了方法。

我的 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 中进行翻译时，它工作正常。

Answer 1

您正在使用 TranslateHttpLoader，它会在请求翻译时发出 HTTP 请求 - translate.use('en')。如果您在 HTTP 调用返回之前调用 instant(messageKey) 方法，ngx-translate 将返回 key ，因为它还没有翻译。所以你应该使用 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'
});

仅当您确定翻译已经加载(如代码示例中)时，您才可以使用 instant 方法，或者您可以编写自定义同步翻译加载器并使用 instant 任何地方。