更改Ionic2上的语言 - 更改所有页面语言的最有效方法是什么

Question

我试图在Ionic2上使用NG2-Translate来执行多语言，并且我添加了button来更改setting page上Apps的语言。基本上，更改语言的功能仅在设置页面上起作用，但另一个页面不会发生任何事情。

我有一种愚蠢的方法来进行翻译，即添加一个函数，它会在每个页面上更改当前页面的语言，当我单击setting page上的按钮时，它将执行。

但是，这种解决方案降低了效率，如何以有效的方式做同样的事情？

这是我代码的一部分：

1. 设置页面：

     import { Component,  ViewChild } from '@angular/core';
     import { NavController, List } from 'ionic-angular';
     import {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
     @Component({
         selector: 'page-setting',
         templateUrl: 'setting.html'
      })
     export class SettingPage {
         translate;
        @ViewChild(List) list: List;
        constructor(public navCtrl: NavController,   translate: TranslateService) {
             translate.setDefaultLang('zh');
             this.translate = translate;
         }
          //When the translation button is clicked
          click() {
             this.translate.use('en');
                  //Change all the pages language
                  location.change('en');`enter code here`
                  home.change('en');
            }
     }
   

Answer 1

我有一个相同的设置页面以更改语言。

我在html上有这个：

<ion-item>
  <ion-label class="primary-text-color">{{ 'Settings.settings.language' | translate }}</ion-label>
  <ion-select [(ngModel)]="language" (ionChange)="onChange($event)">
    <ion-option value="es">Español</ion-option>
    <ion-option value="en">English</ion-option>
  </ion-select>
</ion-item>

然后在我的TS文件上：

import { TranslateService } from 'ng2-translate';
[...]
language: String;
constructor(public translate: TranslateService) {
    this.language = translate.currentLang;
    this.usermail = this.userdata.getEmail();
}
onChange(e) {
    this.translate.use(e);
}

这将在所有页面中更改您的语言，只需使用{{ 'Settings.info.mail' | translate }}管道，当您选择其他不再更改的语言时，它将更改翻译。

希望它能帮助您