Ionic2の言語を変更する - すべてのページ言語を変更する最も効果的な方法は何ですか？

Question

をIonic2に翻訳しようとしていますが、のAppsの言語を変更するためにbuttonを追加しました。基本的に、言語を変更する機能は設定ページのみで機能しますが、他のページは何も起こりません。

私は翻訳を行う愚かな方法があります。それは、すべてのページで現在のページの言語を変更する関数を追加して、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 }}パイプを使用して、それが翻訳を変更します変更を加えずに別の言語を選択すると

希望します。