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

Question

我正在尝试在Ionic2 上使用ng2-translate 来执行多语言，我在setting page 上添加了一个button 来更改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 }} 管道，当您选择另一种语言时，它会更改翻译，无需更多更改。

希望对你有帮助