美文网首页我爱编程
angular4使用ngx-translate来实现语言的国际化

angular4使用ngx-translate来实现语言的国际化

作者: 云小诺 | 来源:发表于2018-03-30 10:41 被阅读0次

    1.npm 安装 ngx-translate 模块

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

    2.开始配置

    在app.module.ts 中添加:

      import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
      import { TranslateHttpLoader } from '@ngx-translate/http-loader';
      import { HttpClientModule, HttpClient } from '@angular/common/http';
    
    
      export function createTranslateLoader(http: HttpClient) {
        return new TranslateHttpLoader(http, './assets/i18n/', '.json');
      }
    
     imports: [
        HttpClientModule,
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [HttpClient]
            } 
          })
        ],
    

    官网写的的是引入 import { HttpModule, Http } from '@angular/http';

    但是新版的angluar中, httpclient逐渐替换http了。所以我这里引入的是HttpClient。下面的imports中,也要对应起来。

    在app.component.ts中添加:

     import { TranslateService } from '@ngx-translate/core';
    
      constructor(    
           public translate: TranslateService 
        ) {
          translate.setDefaultLang('en');
        }
    

    在assets目录下新建 "i18n"文件夹,并增加"en.json"、"zh.json"

    image

    en.json如下:

    {
        "HOME": {
           "TITLE":"Home",
           "CONTENT":"Welcome to my app!"
         }
     }
    

    zh.json如下:

    {
      "HOME": {
          "TITLE":"首页",
          "CONTENT":"欢迎来到我的应用!"
        }
     }
    

    3.运用

    在home.html中:

      <ion-navbar>
        <ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content padding>
        <button (click)="changeLanguage()" ion-button color="light">设置语言</button>
       <h2>{{ 'HOME.CONTENT' | translate }}</h2>
     </ion-content>
    

    在home.ts中:

    import { NavController, AlertController } from 'ionic-angular';
    import { TranslateService } from '@ngx-translate/core';
    
      RadioOpen: boolean;
      RadioResult;
      langs;
    
      constructor(private navCtrl: NavController,
        public alerCtrl: AlertController,
        public translate: TranslateService
      ) {
      }
    
    changeLanguage() {
        this.langs = [{ language: "English", type: "en" }, { language: "简体中文", type: "zh" }]
    
        let alert = this.alerCtrl.create();
        alert.setTitle('语言选择');
        for (let lang of this.langs) {
          alert.addInput({
            type: 'radio',
            label: lang["language"],
            value: lang["type"],
            checked: (lang["type"] == this.translate.getDefaultLang() ? true : false)
          });
        }
        alert.addButton('取消');
        alert.addButton({
          text: '确认',
          handler: data => {
            this.RadioOpen = false;
            this.RadioResult = data;
            this.translate.setDefaultLang(data);
            this.translate.use(data);
          }
        });
    
        alert.present().then(() => {
          this.RadioOpen = true;
        });
      }
    

    到此,就可以实现了,如下图:


    image.png

    ================================ 更新下 ==============================================

    https://www.jianshu.com/p/d64d2917d0db 这篇是关于怎么在ts里面实现中英文转换的 】

    相关文章

      网友评论

        本文标题:angular4使用ngx-translate来实现语言的国际化

        本文链接:https://www.haomeiwen.com/subject/kgbbcftx.html