Angular i18n（国际化方案）

一、引言

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需做大的改变就能够适应不同的语言和地区的需要。对程序来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。 在全球化的时代，国际化尤为重要，因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有l10n（“本地化”的简称）。
angular 将使用 @ngx-translate/core 和 @ngx-translate/http-loader实现国际化方案。

二、实现

1.安装

根据angular 版本选择好对应的版本号

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

 2.在app.module.ts配置

// app.module.ts

import {browsermodule} from '@angular/platform-browser';
import {browseranimationsmodule} from '@angular/platform-browser/animations';
import {ngmodule} from '@angular/core';
import {approutingmodule} from './app-routing.module';
import {formsmodule} from '@angular/forms';
import {httpclient, httpclientmodule} from '@angular/common/http';
import {translatehttploader} from '@ngx-translate/http-loader';
import {translateloader, translatemodule} from '@ngx-translate/core';

// 这里配置
export function createtranslatehttploader(http: httpclient) {
  return new translatehttploader(http, './assets/i18n/', '.json');
}

@ngmodule({
  declarations: [
    appcomponent
  ],
  imports: [
    browsermodule,
    approutingmodule,
    formsmodule,
    httpclientmodule,
    browseranimationsmodule,
    // 在这里配置
    translatemodule.forroot({
      loader: {
        provide: translateloader,
        usefactory: (createtranslatehttploader),
        deps: [httpclient]
      }
    })
  ],
  providers: [],
  bootstrap: [appcomponent]
})
export class appmodule {
}

3.新建json文件

在assets 新建文件夹 i18n,在i18n文件下下新建zh.json 和 en.json 文件，分别表示中文和英文。

// zh.json 不要在json文件写注释，会报错
{
  "hello": "你好",
  "header": {
   "author": "早上好"
  }
}

//  en.json  不要在json文件写注释，会报错
{
  "hello": "hello",
  "header": {
   "author": "good morning"
  }
}

4.获取浏览器默认语言

app.component.ts 文件获取浏览器默认语言，如果不是英语和中文，就默认设置为中文。

import {component, oninit} from '@angular/core';
import {translateservice} from '@ngx-translate/core';

@component({
  selector: 'app-root',
  templateurl: './app.component.html',
  styleurls: ['./app.component.css']
})
export class appcomponent implements oninit {
  title = 'app';

  constructor(public translateservice: translateservice) {
  }

  ngoninit() {
    /* --- set i18n begin ---*/
    this.translateservice.addlangs(['zh', 'en']);
    this.translateservice.setdefaultlang('zh');
    const browserlang = this.translateservice.getbrowserlang();
    this.translateservice.use(browserlang.match(/zh|en/) ? browserlang : 'zh');
    /* --- set i18n end ---*/
  }
}

5.通过以上配置，即可根据浏览器语言设置来加载国际化语言

<h1>{{'hello' | translate}}</h1>  
<h1>{{'header.author' | translate}}</h1>  // 嵌套的这样书写

6.手动选择语言

<button (click)="changelanguage(language)">{{ languagebtn}}</button>

  languagebtn;
  language;

  constructor(public translateservice: translateservice) {
  }

  ngoninit() {
    const browserlang = this.translateservice.getbrowserlang();
    this.settingbtn(browserlang);
  }

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

  /*切换语言*/
  changelanguage(lang: string) {
    console.log(lang);
    this.translateservice.use(lang);
    this.settingbtn(lang);
  }