angular2 如何加入多语言

Author Avatar
Max Zhang 2月 16, 2017
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":"用户注册"
        }