解决ng中国际化异步加载导致的词条未正常显示的问题

解决ng中国际化异步加载导致的词条未正常显示的问题

前置知识

• provider
• InjectionToken
• APP_INITIALIZER

问题描述

因为国际化词条文件是异步加载的，在组件中调用国际化方法获取词条时，如果文件未加载完成，就只会返回key

原理

ng 提供APP_INITIALIZER令牌，根据文档，这个令牌的作用是：所提供的函数是在应用程序启动时注入的，并在应用程序初始化期间执行。如果这些函数中的任何一个返回 Promise，则直到 Promise 被解析之前，初始化都不会完成。

所以说，我们可以通过这个令牌提供一个函数，在这个函数中执行异步操作并返回 Promise。这样，在应用启动后，就可以保证国际化词条已经成功加载了。

实现

@NgModule({
  ...
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: () => initTranslate,
    multi: true
   }]
})
export class AppModule {}

function initTranslate(translate: TranslateService): Promise<any> {
    ...
    return translate.use(locale);
}

在代码中我们使用了FactoryProvider类型的provider选项对象，除此之外还有其他类型

type Provider = TypeProvider | ValueProvider | ClassProvider | ConstructorProvider | ExistingProvider | FactoryProvider | any[];

我的理解，APP_INITIALIZER相当于provider的key，函数就相当于value

而这个key可以通过设置multi: true绑定多个value