Ionic3延遲加載和翻譯不能一起工作

Question

最近我升級了Ionic，現在升級了Ionic3

現在，當前的應用程序不能與Ionic和ng2-translate一起使用。

相同的代碼在沒有延遲加載的情況下工作得很好，但是我們需要使用延遲加載來改善應用程序加載時間並減少顯示的持續時間。

app.module.ts導入組件看起來像

TranslateModule.forRoot({
provide: TranslateLoader,
useClass: TMATranslationLoader
})

TMATranslationLoader看起來像

export class TMATranslationLoader implements TranslateLoader {
  constructor(  ) { }

  getTranslation(lang: string): Observable<any> {
    switch(lang) {
      case 'nl':
        return Observable.of(translations_nl);
      case 'hi':
        return Observable.of(translations_hi);
      // case 'de':
      //   return Observable.of(translations_de);
      // case 'fr':
      //   return Observable.of(translations_fr);
      // case 'es':
      //   return Observable.of(translations_es);
      default:
        return Observable.of(translations_en);
    }
  }
}

app.component.ts看起來像

this.rootPage = 'LoginPage';

login-page.html看起來像

<ion-label floating>{{ 'LBL_USERNAME' | translate }}</ion-label>

已播出的運行時異常

Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translate' could not be found (" <ion-list>
<ion-item class="icon-user">
<ion-label floating>{{ [ERROR ->]'LBL_USERNAME' | translate }}</ion-label>

任何的想法？ 我做錯什么了嗎？

Answer 1

由於延遲加載頁面包含自己的模塊，現在需要在每個延遲加載頁面的模塊中導入translate模塊。

請查看與此相關的離子文檔 。 就像你在那里看到的那樣，使用ngx-translate的步驟是：

1） 安裝

安裝ngx-translate運行

npm install @ngx-translate/core @ngx-translate/http-loader --save.

2） 引導

要使用ngx-translate，必須先將其導入並添加到應用程序的NgModule中的 imports數組中 。

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Http } from '@angular/http';
...

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ]
})

3） 延遲加載頁面

如果要將Ionics延遲加載頁與ngx-translate一起使用，則必須配置component.module.ts文件

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { HelloPage } from './hello-page';

@NgModule({
  declarations: [
    HelloPage,
  ],
  imports: [
    IonicPageModule.forChild(HelloPage),
    TranslateModule.forChild()
  ],
  exports: [
    HelloPage
  ]
})
export class HelloPageModule {}