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