ngx-translate .instant returns 键而不是值

Question

我正在尝试创建一种方法，该方法将使用 translate.instant（参数）接受字符串键和 return 翻译后的字符串值。问题是它 returns 键（参数）。如果找不到翻译，通常这是 returned。我认为问题是在加载器加载翻译之前调用了方法。

我的 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 调用 returns 之前调用 instant(messageKey) 方法，ngx-translate 将 return 键，因为它还没有翻译。所以你应该使用 get(messageKey) 方法来获取翻译 - 它是异步的并且 returns 一个 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任何地方。

Answer 2

您只能在加载翻译文件时使用TranslateService。如果你想安全地使用 TranslateService.instant 你可以写一个 angular 解析器。解析器等待执行您的组件代码，直到可观察到 return 一个值。

这是代码：

------------------------解析器-------------------- ------------------

@Injectable()
export class TranslationLoaderResolver {

    constructor(private translate: TranslateService){
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>{
        return this.translate.get("last.dummy"); //
    }

}

--------------------路由模块--------------------

let routing = RouterModule.forChild([
    {path: "dashboard", component: DashboardComponent, resolve: {model: TranslationLoaderResolver},
     children: [
        ........//here you can omit Resolver
        },
}

-----文件 i18n-----

In last line add the line----> "last.dummy"="dummy translation"

希望对您有所帮助

Answer 3

只需像这样用 onReady 包裹你的 $translate.instant：

$translate.onReady(函数(){ //代码在这里 })

Answer 4

提醒一下：记得清空localStorage。这是我的错误。

Answer 5

您也可以进行虚拟呼叫，等待响应。响应后，每个即时调用都会正常工作，因为它肯定会加载翻译。

async ngOnInit() {
  await this.translate.get('dummyTranslation').toPromise().then();
  this.translate.instant("realTranslation");

ngx-translate .instant returns 键而不是值

ngx-translate .instant returns key instead of value

loader

typescript

ngx-translate

angular