angular – Ionic3延迟加载和翻译不能一起工作

发布时间：2020-12-17 17:43:08 所属栏目：安全来源：网络整理

导读：最近我升级了Ionic,现在升级了Ionic3 现在,当前的应用程序不能与Ionic和ng2-translate一起使用. 相同的代码在没有延迟加载的情况下工作得很好,但是我们需要使用延迟加载来改善应用程序加载时间并减少显示的持续时间. app.module.ts导入组件看起来像 Translat

最近我升级了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';

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

任何的想法？我做错什么了吗？

解决方法

由于延迟加载页面包含自己的模块,现在需要在每个延迟加载页面的模块中导入translate模块.

请看一下ionic docs related to this.就像你可以看到的那样,使用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 {}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!