Angular国际化翻译不生效

问题描述

Angular可以使用管道进行国际化翻译，当数据无法在html文件模板直接进行翻译是可以使用.instant()或.get()方法获取i18n文件中的值；但是当页面渲染早于国际化加载时（比如：在某个路由页面直接F5刷新，由于网络原因i18n文件异步加载未完成），会出现取不到值，页面直接渲染 键 的情况。

解决方法

解决思路：在读取index.html,app初始化过程中，会先执行useFactory，将翻译加载完，才会渲染页面。

• 方法一：
  app.module.ts

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

appInitializer.ts

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