翻译在离子模式下不起作用答案

【问题标题】：Translation not working in ionic modal翻译在离子模式下不起作用
【发布时间】：2017-02-01 16:39:25
【问题描述】：

我正在接管一个带有 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
});

我认为代码的作者将服务作为参数传递，因为依赖注入不起作用。事实上，当我尝试这样做时，使用这个构造函数：

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 服务按预期工作。为什么这项服务运作良好，而翻译却不行？

【问题讨论】：

标签： angular ionic-framework ionic2 ng2-translate

【解决方案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.
  }

  // ...
}

【讨论】：