ionic2 ng2-translateはモーダルで動作しません

Question

ion2のモーダルと組み合わせてng2-translateを使用する際に問題があります。通常のページの翻訳が機能しています。

これは私のapp.module.tsファイルです：私は、次のHTMLコードを使用して、正しい翻訳を取得することができ、私のダッシュボードで例えば

import ... 
@NgModule({ 
    declarations: [ 
    MyApp, 
    //... 
    ], 
    imports: [ 
    TranslateModule.forRoot({ 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [Http] 
    }), 
    IonicModule.forRoot(MyApp), 
    ], 
    exports: [ 
    TranslateModule 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    //... 
    ], 
    providers: [Storage, {provide: ErrorHandler, useClass: IonicErrorHandler}] 
}) 
export class AppModule {} 
export function createTranslateLoader(http: Http) { 
    return new TranslateStaticLoader(http, 'assets/i18n', '.json'); 
} 

を：

<h2>{{'general.tasks' | translate}}</h2>

しかし、次のコードでModalControllerで新しいモーダルをイオン角度から開くとき：

私は general.tasksの代わりに、翻訳された値を取得し、新しいTaskCancelPage

<h2>{{'general.tasks' | translate}}</h2>

しかし、ここで同じHTMLコードを有する

let taskModal = this.modalCtrl.create(TaskCancelPage, {'task': task}); 
taskModal.onDidDismiss(data => { 
    console.log(data); 
}); 
taskModal.present(); 

。

[プロジェクト] /src//app.module.tsで：：それはここに私の作品

Answer 1

は、私がやったことです

import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate'; 
export function createTranslateLoader(http: Http) { 
    return new TranslateStaticLoader(http, './assets/i18n', '.json'); 
} 

import { TranslationService } from '../services/translation/translation'; 
//custom pipe 
import { CapitalizePipe } from '../custom-pipes/capitalize/capitalize';  

@NgModule({ 
    declarations: [ 
    ..., 
    CapitalizePipe, 
    .... 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp), 
    TranslateModule.forRoot({provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [Http]}) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    ... 
    ], 
    providers: [ 
    TranslationService, 
    .... 
    ] 
}) 

では、[プロジェクト]/SRC /アプリ/ app.component.ts [プロジェクト]で

 ... 
     import { TranslationService } from '../services/translation/translation'; 
     import { CapitalizePipe } from '../custom-pipes/capitalize/capitalize'; 

     @Component({ 
      templateUrl: 'app.html', 
     }) 
     export class MyApp { 
      .... 

      constructor(
      ..., 
      public translationService: TranslationService, ... 
     ) {} 
      .... 
     ngOnInit() { 
      return this.defineLang().then(
      (event) => { 
       console.log(MyApp.CLASS_TAG + " this.defineLang() fired: ",event , " getLangs is " , this.translationService.getLangs()); 
       this.[yourFunctionToDefineRootPage](); 
      } 
      ); 
     } 
    ... 
     private defineLang(): Promise<any> { 
     let appDfltLang = 'fr'; 
      this.translationService.getBestLanguageAccordingToBrowserAvailability(appDfltLang); 
     let promise = this.translationService.langSettingOnInit(); 
     return promise; 
     } 
.... 
} 

は/src/custom-pipe/capitalize/capitalize.ts：

import { PipeTransform, Pipe } from '@angular/core'; 
@Pipe({name:'capitalize'}) 

export class CapitalizePipe implements PipeTransform { 
     transform(value?: any,args?: any): any{ 
       return (!!value)?value.charAt(0).toUpperCase()+value.substr(1):value; 
     } 

     } 

[プロジェクト]あなたのページで次に

import { Injectable } from '@angular/core'; 
import { LangChangeEvent, TranslateService } from 'ng2-translate/ng2-translate'; 
import { Observable } from 'rxjs/Observable'; 
import { CapitalizePipe } from '../../custom-pipes/capitalize/capitalize'; 

@Injectable() 
export class TranslationService { 

    private static readonly CLASS_TAG = "TranslationService"; 

    private availableLang: Array<string> = ["fr","en","nl"]; 
    private defaultLanguage:string = "en"; 

    constructor(
     private translateService: TranslateService 
    ) { } 

    setDefaultLang(lang: string) { 
     return this.translateService.setDefaultLang(lang); 
    } 


    use(lang: string): Observable<any> { 
     let brLgSubStr:string = this.getBrowserLang().substr(0,2); 
     let findLg:number = this.availableLang.indexOf(brLgSubStr); 
     if(findLg==-1){ 
      lang = this.defaultLanguage; 
     } 

     return this.translateService.use(lang); 
    } 

    getCurrentLang(): string { 
     return this.translateService.currentLang; 
    } 

    getDefaultLang(): string { 
     return this.translateService.getDefaultLang(); 
    } 

    getBestLanguageAccordingToBrowserAvailability(appDfltLang:string) { 
    console.log(TranslationService.CLASS_TAG + "getBestLanguageAccordingToBrowserAvailability() starts "); 

     let brLang = this.getBrowserLang().substr(0,2); 
     let brLangAmongPossibilities:boolean = false; 

     for(let i in this.availableLang){ 
      if(this.availableLang[i]==brLang){ 
       brLangAmongPossibilities=true; 
      } 
     } 
     if(brLangAmongPossibilities){ 
      this.translateService.use(brLang); 
     } else { 
      this.translateService.use(appDfltLang); 

     } 

     this.translateService.setDefaultLang(appDfltLang); 

    } 

    getBrowserLang():string { 
     return this.translateService.getBrowserLang(); 
    } 

    getLangs():Array<string> { 
     return this.translateService.getLangs(); 
    } 

    getAvailableLangs():Array<string>{ 
     return this.availableLang; 
    } 

    langSettingOnInit(): Promise<LangChangeEvent> { 
     return new Promise((resolve, reject) => { 
      this.translateService.onLangChange.subscribe(
       (event) => { 
        resolve(event); 
       }, 
       (error) => { 
        console.log(TranslationService.CLASS_TAG + "onLangChangeInit() error: " ,error); 
        reject(error); 
       } 
      ); 
     }); 
    } 

    instant(key: string | Array<string>, interpolateParams?: Object): string | any { 
     let result = key && this.translateService.instant(key, interpolateParams); 
     result = (result !== key) ? result : ''; 

     if (key && !result) { 
      console.error(`[not translated key]::${key}`); 
     } 

     return result; 
    } 

    instantCapitalize(key: string | Array<string>, interpolateParams?: Object): string | any { 

     return new CapitalizePipe().transform(this.instant(key)); 
    } 
} 

を/src/services/translation/translation.ts（モーダルかどうか）あなたはそれがサービスをインポート使いたいにおける

：

import { TranslationService } from '[root folder]/services/translation/translation'; 

そして、ページのコンストラクタでサービスを宣言する：あなたのHTMLテンプレートで

@Component({ 
    selector:'custom', 
    templateUrl: 'custom.html' 

}) 
export class CustomPage { 

    constructor(...,public translationService:TranslationService,...){ 
    } 
    .... 
} 

はそれを呼び出す：

<[some text tag]>{{ "[some id word from your trad file]" | translate | capitalize }}</some text tag]> 

またはあなたが最初の文字大文字にしたくない場合は：あなたはあなたが行うことができます例えばAlertControllerを呼び出す場合

<[some text tag]>{{ "[some id word from your trad file]" | translate }}</some text tag]> 

そしてページでは - ：

this.translationService.instantCapitalize("[some id word from your trad file]"); 

場合、またはSO FOR

this.translationService.instant("[some id word from your trad file]"); 

：あなたは、最初の文字を大文字にしたくありません私は、[project]/wwww/assets/i18n/[2 chars language code]の下でのみトレードファイルを読んでいると考えています。json