angular2 国际化实现

时间:2023-03-08 22:23:02
angular2 国际化实现

angular2国际化通过管道(pipe)的形式实现下载ng2-translate

如何使用可以参照https://github.com/ocombe/ng2-translate

自己写了一个小DEMO,可以在dev分支查看https://github.com/lyt308012546/ng2-webpack-demo

import { Component } from '@angular/core';
import { Http, HTTP_PROVIDERS } from '@angular/http';
import {
TranslateService,
TranslateLoader,
TranslatePipe,
TranslateStaticLoader
} from 'ng2-translate/ng2-translate'; @Component({
selector: 'translate',
template: `
<br>
<br>
<br>
<button (click)="changeLang('en')">英文</button>
<button (click)="changeLang('zh_cn')">中文</button>
<br>
<h1>{{ 'HELLO' | translate:{value: param} }}</h1>
`,
pipes: [TranslatePipe]
}) export class Translate {
param: string = "world"; // userLang: string = "en"; constructor(public translate: TranslateService) {
// var userLang = navigator.language.split('-')[0]; // use navigator lang if available
// userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
// // this language will be used as a fallback when a translation isn't found in the current language
// translate.setDefaultLang('zh_cn');
// // the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use("zh_cn"); //获取值
console.log(this.translate.instant("HELLO"));
} changeLang(userLang) {
// the lang to use, if the lang isn't available, it will use the current loader to get them
this.translate.use(userLang);
}
} export const TRANSLATE_PROVIDERS = [
HTTP_PROVIDERS,
{
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
},
TranslateService
];