《Angular2之i18n运行机制》

前言：

   最近由于项目需要，需要对于angular2进行深入研究，之前虽有所研究，但由于缺乏最佳实践，继而真正到实践的时候还是遇到很多关键点。切身体会到：“考虑一千次，不如去做一次！犹豫一万次，不如实践一次！”。在angular2相关的前端项目里面，会出现i18n这样的一个文件，想知道这个文件干嘛用的吗？跟着小编一起来看看吧。

正文：

   i18n这个文件可以使web页面文字进行多语言处理，在这里就是可以使中文变成英文，运用这样的机制，可以使web页面文字国际化显示。

   以大漠穷秋老师的《NiceFish》项目为例，阐述一下i18n在项目里所起到的作用。

   在《NiceFish》项目里，有一个用户登录的组件，想要让用户登录这四个字在中英文之间切换，需要进行四步：

1.在根组件app.module.ts中引入依赖包：

import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
 

imports: [
     TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    })]

2.在根组件app.component.ts中引入依赖包：

import { TranslateService } from 'ng2-translate';

export class AppComponent {
  constructor() {
    console.log('Environment config', Config);
  }
  ngOnInit() {
	    this.translate.addLangs(["zh", "en"]);
		this.translate.setDefaultLang('zh');

		const browserLang = this.translate.getBrowserLang();
		console.log("检测到的浏览器语言>" + browserLang);
		this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
  }
}

3.修改User-login.component.html：

<h3 class="panel-title">用户登录</h3>

把上述语句修改成：

<h3class="panel-title">{{'userLogin.userLogin' |translate}}</h3>

4.修改：assets中的i18n-en.json添加：

"userLogin":{

        "userLogin":"UserLogin"

    } 

修改：assets中的i18n-zh.json添加：

"userLogin":{

       "userLogin":"用户登录"

    }

5.验证

  以谷歌浏览器为例：输入《NiceFish》网址：http://localhost:4200

  谷歌浏览器修改语言网址：http://jingyan.baidu.com/album/f25ef25417f1eb482d1b827c.html?picindex=3

  此时《NiceFish》页面显示前后变化为：

设置前：

设置后：

 

后记：

   对于angular2的研究“路漫漫其修远兮，吾将上下而求索”。