Перевод не работает в ионном модальном

Question

Я принимаю код небольшого приложения witl Ionic v2, и я использую ng2-translate для своих переводов. У меня проблема с переводами только в модальном окне. Он работает очень хорошо везде, кроме этого модального, где я могу видеть только ключи transaltion.

Вот мой 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 
}); 

Я думаю, что автор кода передал услуги в качестве параметров, так как инъекции зависимостей Ждут» т работы. На самом деле, когда я пытаюсь сделать это с помощью этого конструктора:

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'; 

@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 
    } 
} 

Так что этот обходной путь отображается в текущей реализации должен быть похож на это:

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. 
    } 

    // ... 
}