Angular 在离子模态下翻译不起作用

我正在接管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

服务按预期工作。为什么这项服务很好，但翻译却不行？

这似乎是一个问题。解决办法是需要按照问题日志中的说明重新初始化模式的翻译服务：

在页面上工作，但在模态内部不工作。这就好像翻译服务在modal中不可用一样。如果在模式中，我通过运行this.translate.use（'fr'）重新初始化translate服务；然后事情就顺利了。例如，下面的代码可以正常工作

因此，映射到当前实现的此解决方案应类似于：

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

  // ...
}

看来这是一个好消息。解决办法是需要按照问题日志中的说明重新初始化模式的翻译服务：

在页面上工作，但在模态内部不工作。这就好像翻译服务在modal中不可用一样。如果在模式中，我通过运行this.translate.use（'fr'）重新初始化translate服务；然后事情就顺利了。例如，下面的代码可以正常工作

因此，映射到当前实现的此解决方案应类似于：

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

  // ...
}