在继续加载 Angular 应用程序之前确保已加载翻译 JSON 文件

Question

我们使用 ng2-translate 在 Angular 应用程序中实现国际化，并使用 .instant(...) 方法进行翻译以避免订阅 observables 的混乱。

但是，如果翻译 JSON 文件尚未完成加载，.instant 将出错。有没有办法等到翻译文件下载完成后再继续加载应用程序的其余部分？

Answer 1

也许您可以尝试在 Angular 应用启动时初始化默认语言翻译。

在你的 app.module.ts 中添加这个

providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: appInitializerFactory,
    deps: [TranslateService],
    multi: true
  }
]


import { APP_INITIALIZER } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

export function appInitializerFactory(translate: TranslateService) {
  return () => {
    translate.setDefaultLang('es');
    return translate.use('es').toPromise();
  };
}

您可以在此处找到更多详细信息：https://mcvendrell.medium.com/configuring-ngx-translate-to-load-at-startup-in-angular-1995e7dd6fcc

Answer 2

文档明确说明了 instant ：获取键（或键数组）的即时转换值。 /!\这个方法是同步的，默认的文件加载器是异步的。 您有责任了解您的翻译何时加载以及使用此方法是安全的。如果您不确定，那么您应该使用 get 方法。

另外，请注意您不能阻止角度初始化。角度团队不希望您能够做到这一点。

我阅读了 lib 的代码，无论如何，use 方法都会返回一个 observable。所以你最好的办法是在你的代码中做（鉴于你没有发布你的文档示例代码：

constructor(translate: TranslateService) {
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

    // the lang to use, if the lang isn't available, it will use the current loader to get them
    /* Here is your observable */
    translate
        .use(userLang)
        .subscribe(res: any => 
        {
            // In here you can put the code you want. At this point the lang will be loaded
        });
}

所以在订阅回调中你可以做任何你想做的事情，因为此时已经加载了 lang。由于您没有发布代码，因此我无法为您提供更多帮助，但是如果您需要进一步的帮助，请立即联系我。