イオンモーダルで翻訳ができません

Question

小さなアプリケーションwitl Ionic v2のコードを引き継いでいます。私は翻訳にng2-translateを使用しています。私はモーダルウィンドウでのみ翻訳に関する問題があります。このモードでは、私はトランスサルティションキーしか見ることができませんが、どこでもうまく動作します。

は、ここに私のAppModuleです：

@NgModule({ 
    declarations: [ 
    MyApp, 
    // ... 
    SearchPersonModal 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp), 
    ChartModule, 
    TranslateModule.forRoot({ 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [Http] 
    }) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    // ... 
    SearchPersonModal, 
    ], 
    providers: [ 
    ApiCaller 
    ] 
}) 
export class AppModule {} 

モーダルは、リモート・データベース内のユーザーを検索するためのアプリケーションで使用されています。ここでは、モーダルコンポーネントのコードは次のとおりです。

@Component({ 
    selector: 'page-search-person', 
    templateUrl: 'search-person.html', 
}) 
export class SearchPersonModal { 

    public caller : ApiCaller = null; 
    public translate : TranslateService = null; 

    // .. 

    constructor(
    public viewCtrl: ViewController, 
    public toastr: ToastController, 
    params: NavParams 
) { 
    this.translate = params.get('translate'); 
    this.caller = params.get('caller'); 
    } 

    // ... 
} 

そしてここでは、モーダルが提示される方法です。

let modal = this.modalCtrl.create(SearchPersonModal, { 
    caller: this.caller, 
    translate : this.translate 
}); 

私は依存性の注入「はdidnのため、コードの作者はパラメータなどのサービスを渡されると思います仕事。実際に、私はそうしようとすると、このコンストラクタで：

export class SearchPersonModal { 

    //public caller : ApiCaller = null; 
    //public translate : TranslateService = null; 

    // ... 

    constructor(
    public viewCtrl: ViewController, 
    public toastr: ToastController, 
    public caller: ApiCaller, 
    public translate: TranslateService, 
    params: NavParams 
) { 
    //this.translate = params.get('translate'); 
    //this.caller = params.get('caller'); 
    } 

    // ... 
} 

翻訳はまだ動作しませんが、期待通りApiCallerサービスが動作します。なぜこのサービスはうまくいくのですか？

Answer 1

これはcurrently known issue with Ionic 2 and has been reported on their repoと思われます。この問題を回避するには、翻訳ログに記載されているように、変換サービスをモーダルに対して再初期化する必要があります。

これらは、ページ上で動作しますが、モーダル内では動作しません。翻訳サービスがモーダル内部で利用できないかのようです。モーダル内で、this.translate.use（ 'fr'）を実行して翻訳サービスを再初期化します。物事はうまくいく。たとえば、次のコードは正常に動作します。

import { TranslateService } from 'ng2-translate/ng2-translate'; 

export class SearchPersonModal { 

    public caller : ApiCaller = null; 
    public translate : TranslateService = null; 

    // ... 

    constructor(
    public viewCtrl: ViewController, 
    public toastr: ToastController, 
    public caller: ApiCaller, 
    private translate: TranslateService 
    params: NavParams 
) { 
    this.caller = params.get('caller'); 
    this.translate.use('en'); // Re-initialised rather than passed via navParams. 
    } 

    // ... 
} 

：

import { TranslateService } from 'ng2-translate/ng2-translate'; 

@Component({ 
    templateUrl: 'my-modal.html', 
    selector: 'my-modal', 
}) 

export class MyModal { 
constructor(
    private translate: TranslateService 
) { 
    var self = this; 
    this.translate.use('fr'); // Re-initializing the translate service inside a modal 
    // Here on translation works fine 
    } 
} 

は、だからあなたの現在の実装にマッピングされ、この問題を回避するには、このようになります