Angular2国际化

推荐使用ngx-translate模块进行angular2的国际化。实现过程如下：

1. 使用angular-cli初始化项目

ng new my-project

2. 使用npm安装ngx-translate模块

    npm install --save @ngx-translate/core 
    npm install --save @ngx-translate/http-loader 

3. 在项目的根模块app.module.ts中引入该模块

1. 在项目中导入支持的包

    import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';

2. 功能设置

    //导出加载函数
    export function HttpLoaderFactory(http:Http){
        return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    }
    
    @NgModule({
        declarations: [
        AppComponent
    ],
    imports: [
    ...
        TranslateModule.forRoot({
            loader:{
            provide:TranslateLoader,
            useFactory:HttpLoaderFactory,
            deps:[Http]
            }
        })
    ],
    providers: [],
    bootstrap: [AppComponent]
    })

3. 在assets文件夹下新建i18n文件夹，并且新建两个语言的json文件。（比如zh-CN.json和en.json）

json文件是key-value形式的，key值代表要翻译的字符串，value值为特定语言的翻译结果，不用语言的文件一般key值是相同的，只是value值不同。

    //zh-CN.json
    {
    "welcome":"欢迎使用本应用",
    "hello":"你好",
    "get-lang":"获取语言类型"
    }
    
    //en.json
    {
    "welcome":"welcome to this app",
    "hello":"Hola"
    }

4. 然后在相应的组件中使用Translate服务

        import { TranslateService } from '@ngx-translate/core'
        @Component({
        ...
        })
        export class AppComponent {
        constructor(private translate: TranslateService) {
        //添加语言支持
        translate.addLangs(['zh-CN', 'en']);
        //设置默认语言，一般在无法匹配的时候使用
        translate.setDefaultLang('zh-CN');
        
        //获取当前浏览器环境的语言比如en、 zh
        let broswerLang = translate.getBrowserLang();
        translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : 'zh-CN');
        }
        
        changeLang(lang) {
        console.log(lang);
        this.translate.use(lang);
        }
        toggleLang() {
        console.log(this.translate.getBrowserLang());
        //获取语言风格，相当于更详细的语言类型，比如zh-CN、zh-TW、en-US
        console.log(this.translate.getBrowserCultureLang());
        } 
        }  

示例模板：

    

    
{{ title | translate }}
    
    {{ 'hello' | translate }}
    
    {{ lang }}
    
    
    
    {{'get-lang' | translate}}

使用方式和angularjs1中的ng-translate类似，使用translate管道。

项目地址