时间戳

首页 > 解决方案 > 离子 3 的 ngx-translate 无法正常工作

angular - 离子 3 的 ngx-translate 无法正常工作

问题描述

我正在使用 ngx-translate 在 ionic 3 中创建一个多语言应用程序。以下是我的代码。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http"; 

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
      BrowserModule,
      HttpClientModule,
      IonicModule.forRoot(MyApp),
      TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
      }) 
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private translate: TranslateService) {

      translate.setDefaultLang('en');
      translate.use('en');
      this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

它是 ngx-translate 的简单实现。我收到以下错误

Runtime Error
Function Expected

TypeError: Function expected
   at TranslateService.prototype.get (http://localhost:8100/build/vendor.js:80892:17)
   at TranslatePipe.prototype.updateValue (http://localhost:8100/build/vendor.js:81287:9)
   at Anonymous function (http://localhost:8100/build/vendor.js:81357:21)
   at Anonymous function (http://localhost:8100/build/vendor.js:5039:36)
   at SafeSubscriber.prototype.__tryOrUnsub (http://localhost:8100/build/vendor.js:20899:13)
   at SafeSubscriber.prototype.next (http://localhost:8100/build/vendor.js:20846:17)
   at Subscriber.prototype._next (http://localhost:8100/build/vendor.js:20786:9)
   at Subscriber.prototype.next (http://localhost:8100/build/vendor.js:20750:13)
   at Subject.prototype.next (http://localhost:8100/build/vendor.js:23237:17)
   at EventEmitter.prototype.emit (http://localhost:8100/build/vendor.js:5007:24)

离子框架：3.9.2 离子应用脚本：3.1.9 Angular 核心：5.2.10 Angular 编译器 CLI：5.2.10 节点：7.8.0

任何帮助

标签： angularionic3ngx-translate

解决方案

我解决了这个问题。问题在于@ngx-translate 的版本。我正在使用带有角度 5 的 @ngx-translate 10.0 版，如此处所述不支持。我使用了@ngx-translate 9.x 版和@ngx-translate/http-loader 2.x 版。这解决了我的问题。

推荐阅读