在Ionic3中使用延迟加载进行语言规范化

Question

我即将在Ionic3应用程序中使用Lazy加载实现语言规范化。我正在使用插件ngx-translate。但我收到错误'TypeError: Cannot read property 'call' of undefined'。请帮我解决这个错误

代码

1。 app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from "@angular/common/http";

export function createTranslateLoader(https: HttpClient) {
  return new TranslateHttpLoader(https, './assets/i18n/', '.json');
}
    @NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(config),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    -------        
  ]
})
export class AppModule { }

app.component.ts

ngOnInit(): void {
this.translate.addLangs(["en", "ml"]);
    this.defaultLng = this.translate.setDefaultLang("ml");
    this.translate.use(this.translate.getBrowserLang().match(/en|ml/) ? this.translate.getBrowserLang() : this.defaultLng);
}

3。 login.module.ts

    import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
import { Http } from '@angular/http';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
   TranslateModule.forChild()
  ],
})
export class LoginPageModule {}

4.login.html

 <ion-item no-lines>
    <span >{{'language'|translate}}:</span>&nbsp;&nbsp;<span (click)="changeLanguage('en')">english</span>&nbsp;&nbsp;
    <span (click)="changeLanguage('sp')">Spanish</span>
  </ion-item>

修改

错误，我正在

    ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (vendor.js:55)
    at main.js:765
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:5291)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:5282)
    at t.invokeTask (polyfills.js:3)
    at __webpack_require__ (vendor.js:55)
    at main.js:765
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:5291)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:5282)
    at t.invokeTask (polyfills.js:3)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (vendor.js:55465)
    at NavControllerBase._failed (vendor.js:55458)
    at vendor.js:55505
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:5291)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

Answer 1

最后我找到了解决方案。请检查以下对问题中发布的代码的更改。

1. 从MissingTranslationHandler
导入@ngx-translate/core

2. 导出名为MyMissingTranslationHandler的自定义类，如下所示。并在app.module.ts

   中导入

   import {MissingTranslationHandler, MissingTranslationHandlerParams} from '@ngx-translate/core'; export class MyMissingTranslationHandler implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { console.log(params); return 'Translations not available for ' + params.key; } }

3. import { HttpClient,HttpClientModule } from "@angular/common/http";

4. import { TranslateHttpLoader } from '@ngx-translate/http-loader';

5. 添加函数HttpLoaderFactory

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

1. 在装扮器import的{​​{1}}数组中，将@NgModule更改为

TranslateModule 7.在TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) 数组中添加providers

在我们的.module.ts文件中，在{ provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler}数组中添加TranslateModule而不是imports。

如果您有任何疑问，请在评论部分提及。