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

Question

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

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

Answer 1

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

将其添加到您的 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 方法。

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

我阅读了 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 已加载。由于您没有发布代码，我无法为您提供更多帮助，但是如果您需要进一步的帮助，请现在让我。