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

关于angular2的i18n,网上的资料也很少,恰好项目须要用到,就本身去查阅各类资料,本身整理了出来,分享下出来给你们吧。废话很少说!直接上代码:html

首先咱们确定要新建一个文件,叫aaa(网上angular-cli教程不少),
cmd打开命令进入到随便一个目录底下:node

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

输入指令下载依赖npm

npm install           --下载依赖包node_modules

这时文件所有都有了:
图片描述json

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

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:angular2

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

而后在打开app文件,在 app.module.ts 中添加如下代码:app

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     //启动服务

图片描述

相关文章
相关标签/搜索