Ionic3 中延迟加载的语言规范化

Question

我即将在我的 Ionic3 应用程序中通过延迟加载实现语言规范化。我正在使用插件 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. 从 @ngx-translate/core
导入 MissingTranslationHandler

2. 导出名为 MyMissingTranslationHandler 的自定义 class，如下所示。并将其导入 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'); }

6. 在装饰器的 import 数组中 @NgModule 将 TranslateModule 更改为

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

在我们的 .module.ts 文件中，在 imports 数组中添加 TranslateModule 而不是 TranslateModule.forChild() 。

如有疑问，请在评论区提出。