关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。

大佬教程收集整理的这篇文章主要介绍了关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

关于angular2的i18n，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。废话不多说！直接上代码：

首先我们肯定要新建一个文件，叫aaa（网上angular-cli教程很多），
cmd打开命令进入到随便一个目录底下：

ng new aaa                    --创建名字叫aaa文件

输入指令下载依赖

npm install           --下载依赖包node_modules

这时文件全部都有了：

紧接着开始我们关于i18n解决方法。
在aaa这个文件目录底下输入命令来安装ng2-translate：

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

然后打开我们的文件在一个文件名为assets底下新建一个文件夹名字叫i18n，assets在文件src里面，然后文件夹里面再创建两个json文件，名字分别为“en.json”和“zh-CN.json”，分别代表英文和中文（记得编辑器生成后改编码utf-8，不然之后浏览器显示中文会乱码）。

en.json：

{
"Hello":"Hollo","language":"Chinese and English"
}

zh-CN.json:

{
"Hello":"你好","language":"中文和英文"
}

然后在打开app文件，在 app.module.ts 中添加以下代码：

import { TranslatehttpLoader } from '@ngx-translate/http-loader';
import {http} from '@angular/http';
import { TranslateModule,TranslateStaticLoader,TranslateLoader } from 'ng2-translate/ng2-translate';


export function httpLoaderFactory(http:http){
    return new TranslatehttpLoader(http,'./assets/i18n/','.json');
}

@NgModule({
  imports: [
    BrowserModule,TranslateModule.forRoot({
      provide: TranslateLoader,useFactory: (httpLoaderFactory),deps: [http]
    })
  ],providers: [],bootstrap: [AppComponent]
})

然后在app.component.ts文件里面：添加一下代码：

import {TranslateservicE} from 'ng2-translate';

export class AppComponent {
    getLangs:anY[];  //定义一个数组
    constructor(private translate: TranslateservicE) {
    //添加语言支持
    }
    ngOnInit(){
        //下拉按钮的值
        this.getLangs = [
            {label:'中文',value:'zh-CN'},{label:'英语',value:'en'}
        ];
        //添加语言
        this.translate.addLangs(['zh-CN','en']);

        //设置默认语言
        this.translate.setDefaultLang('zh-CN');

        //获取当前浏览器环境的语言比如en、zh-CN
        let broswerLang = this.translate.getBrowserLang();
        
        //使用语言
        this.translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : 'zh-CN');    
    }

    changeLang(indeX) {
         this.translate.use(indeX);
    }
    
      title = 'angular-Translate';
}

最后HTML代码呈上：

<div style="text-align:center">
    <h1>
        Welcome to {{titlE}}!
    </h1>
  </div>
  <div class="language">{{ 'language' | translate }}</div>
  <div>
    <SELEct #langSELEct (changE)="changeLang($event.target.value)" class="SELEctBtn">
          <option *ngFor="let lang of getLangs" [value]="lang.value">{{lang.label}}</option>
    </SELEct>
</div>

最后一步：
输入指令

ng serve     //启动服务

大佬总结

以上是大佬教程为你收集整理的关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。全部内容，希望文章能够帮你解决关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。