Question

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

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

Answer 1

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

另外，请注意，您无法阻止角度初始化。有远见的团队不希望你能够做到这一点。

我读了lib的代码，无论如何，use方法都会返回一个observable。因此，您最好的方法是在您的代码中执行（给定doc示例代码，因为您没有发布您的代码：

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已加载。由于您没有发布代码，我无法为您提供更多帮助，但如果您需要进一步的帮助，请立即与我联系。

Answer 2

也许您可以尝试在 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

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

2 个答案: