Angular i18n国际化（多语言）配置

1、安装依赖

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

2、配置App.module

引入模块

import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

读取json文件

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

如果需要读取多个文件，使用如下配置

// export function createTranslateLoader(http: HttpClient) {
//   return new MultiTranslateHttpLoader(http, [
//     {prefix: "./assets/translations/share/", suffix: ".json"},
//     {prefix: "./assets/translations/quotes/", suffix: ".json"},
//   ]);
// }

跟模块使用forRoot配置

imports: [
    TranslateModule.forRoot({
      defaultLanguage: 'zh',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],

3、配置子模块

如果使用了模块懒加载，则需要对子模块进行配置，没有略过，导入的文件包和函数配置等都是相同的，只有imports注入时使用forChild()配置。

imports: [
  TranslateModule.forChild({
    loader: {
     provide: TranslateLoader, 
      useFactory:(HttpLoaderFactory), 
      deps: [HttpClient]
    },
    // 隔离服务，如果隔离服务打开，会订阅不到其他模块更改语言！
    isolate: true 
  })
]

4、配置JSON

{
  "language": "Lang",
  "home": "Home"
  }
{
  "language": "语言",
  "home": "主页"
}

5、配置语言切换按钮

该示例为下拉框选择

<div class="header-icon-wrap header-dropdown">
        <button
          nz-dropdown
          [nzDropdownMenu]="languageMenu"
          [nzPlacement]="'bottomRight'"
          style="background-color: transparent; border: none"
        >
          <a class="text">{{ 'language' | translate }}</a>
        </button>
        <nz-dropdown-menu #languageMenu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="changeLanguage('zh')">
              <i class="icon iconfont header-icon icon-peizhi" ></i> 简体中文
            </li>
            <li nz-menu-item  (click)="changeLanguage('en')">
              <i class="icon iconfont header-icon icon-personnel" ></i> English
            </li>
          </ul>
        </nz-dropdown-menu>
      </div>

/** 设置btn的文字和需要传递的参数 */
  settingBtn(language: string) {
    if (language === 'zh') {
      this.languageBtn = 'EN';
      this.language = 'en';
    } else {
      this.languageBtn = '中文';
      this.language = 'zh';
    }
  }

  /** 切换语言 */
  changeLanguage(lang: string) {
    this.i18n.use(lang);
    this.settingBtn(lang);
  }

6、监听语言切换

在app.component里面点阅语言切换，子模块关闭了服务隔离的话，可以全局切换语言。

import { TranslateService } from '@ngx-translate/core';
constructor(public i18n: TranslateService) { }
ngOnInit(): void {
    // 根据浏览器语言设置默认语言 
    const browserLang = this.i18n.getBrowserLang();
    const useLang = browserLang?.match(/zh|en/) ? browserLang : 'en';
    this.i18n.use(useLang);

    // 订阅语言切换事件
    this.i18n.onLangChange.subscribe((params) => {
      this.i18n.use(params.lang);
    });
  }

7、业务代码中使用

html中使用

<p>{{ 'yes' | translate }}</p>

TS中使用

this.translate.instant('yes');