Bootstrap

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';
;