angular2 如何加入多语言
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http, './assets/i18n', '.json');
}
新建文件 assets/i18n
新建.json 文件
语言应该是在全局页面定义,浏览器检查当前语言是什么,之前需要在appComponent 里面 constructor
定义translate:TranslateService
import { TranslateService } from 'ng2-translate';
constructor(
public translate: TranslateService
){
}
并且在ngOnit里面调用,去查看浏览器当前语言
ngOnInit() {
this.translate.addLangs(["zh", "en"]);这里定义了2种语言
this.translate.setDefaultLang('zh');
const browserLang = this.translate.getBrowserLang();
console.log("检测到的浏览器语言>"+browserLang);
this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
}
html 页面通过键值去绑定值,通过管道pipe 去匹配值所对应的.json 的值
<h3>{{'userRegister.userSignUp' | translate}}</h3>
en.json格式
"userRegister":{
"userSignUp":"User Sign Up"
}
zn.json格式
"userRegister":{
"userSignUp":"用户注册"
}