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

Question

我正在尝试在 Ionic2 上使用 ng2-translate 来实现多语言，并且我添加了一个 button 用于更改 Apps 上的语言setting page。换语言的功能基本上只在设置页面起作用，其他页面不会发生任何事情。

而且我有一个愚蠢的翻译方法，那就是在每个页面上添加一个功能，可以改变当前页面的语言，当我点击 [=14= 上的按钮时它会被执行].

但是这个解决方案效率较低，如何才能有效地做同样的事情？

这是我的部分代码：

设置页面：

  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 }} 管道，当您选择另一种语言时，它会更改翻译。

希望对你有帮助

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

Change language on Ionic2 - What is the most effective way to change all page language?

ionic-framework

ionic2

ng2-translate