javascript - angular2 翻译 ionic 2 没有 Http 提供者! (我的应用程序 -> 翻译服务 -> Http)

Question

我正在使用 ionic2/angular2 和 ng2-translate。我收到错误“没有 Http 提供程序!(MyApp -> TranslateService -> Http)”。我没有使用 typescript 。我相信这段代码是 typescript 形式的。有人可以帮我将其转换为 JavaScript 吗？因为我在 ionic2 项目中使用了 javascript。这是 ng2-translate 文档中的代码。我刚刚接触 ionic2 和 angular2。

import {provide} from '@angular/core';
import {TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

@App({
  templateUrl: '....',
  config: {},
  providers: [
    provide(TranslateLoader, {
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService
  ]
})

这是我的 app.js

import {App, IonicApp, Platform, Storage, SqlStorage} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {MainPage} from './pages/main/main';
import {TabsPage} from './pages/jeepney/tabs/tabs';
import {LandingPage} from './pages/landingpage/landingpage';
// import {JeepneyRoutesPage} from './pages/jeepney/jeep-routes/jeep-routes';
// import {ListPage} from './pages/list/list';

import {DataService} from './services/data';

import {ConnectivityService} from './providers/connectivity-service/connectivity-service';
import {GoogleMapsService} from './providers/google-maps-service/google-maps-service';

import {LoadingModal} from './components/loading-modal/loading-modal';

import {provide} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';



@App({
  templateUrl: 'build/app.html',
  providers: [DataService,ConnectivityService,
    HTTP_PROVIDERS,
    provide(TranslateLoader, {
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService],
  directives: [LoadingModal],
  config: {
    iconMode: 'md',
    modalEnter: 'modal-slide-in',
    modalLeave: 'modal-slide-out',
    pageTransition: 'ios',
    tabSubPages: false,
    backButtonIcon: 'ios-arrow-back',
    tabbarPlacement: 'top',
    backButtonText: ''
    // menuType: 'reveal'
  } // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  static get parameters() {
    return [[IonicApp], [Platform],[TranslateService]];
  }

  constructor(app, platform,translate) {
    this.translate=translate;
    // set up our app
    this.app = app;

    this.platform = platform;
    this.initializeApp();
    // make HelloIonicPage the root (or first) page
    this.rootPage = LandingPage;
    // this.initializeTranslateServiceConfig();
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

     // this language will be used as a fallback when a translation isn't found in the current language
    this.translate.setDefaultLang('en');

     // the lang to use, if the lang isn't available, it will use the current loader to get them
    this.translate.use(userLang);
  }

  initializeTranslateServiceConfig() {
  var prefix = 'assets/i18n/';
  var suffix = '.json';
  this.translate.useStaticFilesLoader(prefix, suffix);

  var userLang = navigator.language.split('-')[0];
  userLang = /(de|en|hr)/gi.test(userLang) ? userLang : 'en';

  this.translate.setDefaultLang('en');

  this.translate.use(userLang);
}

  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.
      StatusBar.styleDefault();

      // this.storage = new Storage(SqlStorage);
      // this.storage.query('CREATE TABLE IF NOT EXISTS people (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT)').then((data) => {
      //     console.log("TABLE CREATED -> " + JSON.stringify(data.res));
      // }, (error) => {
      //     console.log("ERROR -> " + JSON.stringify(error.err));
      // });

    });
  }

}

Answer 1

您需要提供HTTP_PROVIDERS:

import {HTTP_PROVIDERS, Http} from '@angular/http';

@App({
  templateUrl: '....',
  config: {},
  providers: [
    HTTP_PROVIDERS,
    provide(TranslateLoader, {
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService
  ]
})