Angular开发(二十一)-关于国际化的处理

angular2中开发国际化(一个页面中来回切换几种语言)

实现国际化基本步骤

• 1、使用angular-cli创建一个项目工程
• 2、创建一个组件page3的demo来展现国际化功能
• 3、使用npm安装ngx-translate模块
  
  • npm install --save @ngx-translate/core
  • npm install --save @ngx-translate/http-loader

• 4、在根模块中app.module.ts中引入上面安装的模块

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

• 5、在assets文件夹中新建i18n文件夹新增两个json文件
  
  • zh-CN.json
  • en.json
• 6、zh-CN.json文件表示中文内容

{
     "title": "我是需要翻译的",
     "hello": "你好",
     "get-lang": "获取语言类型",
     "content": "你好世界"
 }

• 7、en.json文件表示英文下内容

{
    "title": "title",
    "hello": "Hi",
    "get-lang": "getlang",
    "content": "hello word"
}

• 8、继续在app.module.ts文件中添加内容

....
    export function HttpLoaderFactory(http:Http){
          return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    }
    ....
    @NgModule:({
        ...
        imports:[
            TranslateModule.forRoot({
                loader:{
                    provide:TranslateLoader,
                    useFactory:HttpLoaderFactory,
                    deps:[Http]
                }
            })
        ]
        ...
    })

• 9、在Page3Component.ts文件中添加引入

import { TranslateService } from '@ngx-translate/core'

• 10、在Page3Component.ts书写中英文切换

export class Page3Component implements OnInit {   
        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');
        }
        //定义在select上下拉获取值的方法
        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());
        }
        ngOnInit() {

        }

    }

• 11、在Page3Component.html书写页面

<div>
        <h2>{{ 'title' | translate }}</h2>
        <label>{{ 'hello' | translate }}
            <select #langSelect (change)="changeLang(langSelect.value)">
            <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
            </select>
        </label>
        <p>{{'content' | translate}}</p>
    </div>
    <button (click)="toggleLang()">{{'get-lang' | translate}}</button>

• 12、项目文件下载地址