在 Angular 2 ES6 上的组件内使用 service/provider

Question

我试图让一个服务在我的组件中工作，但是在我的生命中经过无数次迭代并耗尽 google 的资源我还没有能够让它工作，即使它基本上与我发现的每个示例一致。我最后一次尝试是使用 ionics generator 来生成提供者，但仍然不起作用。

服务：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EventsService {
  static get parameters() {
    return [
      [Http]
    ]
  }

  constructor(http) {
    this.http = http;
    this.data = null;
  }

  load() {
    if (this.data) {
      return Promise.resolve(this.data);
    }

    return new Promise(resolve => {
      this.http.get( 'URL_OMMITED')
        .map(res => res.json())
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });
  }
}

分量：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ScientificFactsPage } from '../scientific-facts-page/scientific-facts-page';
import { Header } from '../../components/header/header';
import { List } from '../../components/list/list';
import { EventsService } from '../../providers/events-service/events-service';

@Component({
  templateUrl: 'build/pages/home-page/home-page.html',
  directives: [Header, List],
  providers: [EventsService],
})
export class HomePage {
  static get parameters() {
    return [
      [NavController]
    ];
  }

  constructor(_navController) {
    this._navController = _navController;
    this._events = EventsService;

    this.provinces = this._events.load();
  }

  logProvince(province) {
    alert(`You selected ${province.name}`);
  }

}

我不知道我错过了什么，控制台抛出一个巨大的堆栈跟踪错误，这个错误和 'Something happened' 一样有用.

错误摘录：

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: this._events.load is not a function
ORIGINAL STACKTRACE:
TypeError: this._events.load is not a function
    at new HomePage (http://localhost:8100/build/js/app.bundle.js:233:35)
    at DebugAppView._View_HomePage_Host0.createInternal (HomePage_Host.template.js:25:24)
    at DebugAppView.AppView.create (http://localhost:8100/build/js/app.bundle.js:26040:21)
    at DebugAppView.create (http://localhost:8100/build/js/app.bundle.js:26233:44)
    at ComponentFactory.create (http://localhost:8100/build/js/app.bundle.js:25354:36)
    at ViewContainerRef_.createComponent (http://localhost:8100/build/js/app.bundle.js:26430:45)
    at http://localhost:8100/build/js/app.bundle.js:25571:29
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29)
    at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:30868:41)
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35)
ERROR CONTEXT:
[object Object]

Answer 1

您需要像注入 NavController 一样注入 EventService。您刚刚分配了类型变量。您至少需要使用 = new EventService() 而不仅仅是 = EventService，但注入更好，而且可能是您想要的，因为您已经将其添加到 providers: [...].

@Component({
  templateUrl: 'build/pages/home-page/home-page.html',
  directives: [Header, List],
  providers: [EventsService],
})
export class HomePage {
  static get parameters() {
    return [
      // updated according to the find of @RemeJuan
      [NavController], [EventsService]
    ];
  }

  constructor(_navController, _events) {
    this._navController = _navController;
    this._events = _events;

    this.provinces = this._events.load();
  }

  logProvince(province) {
    alert(`You selected ${province.name}`);
  }

}

Answer 2

花了一些时间，但在 https://github.com/driftyco/ionic-conference-app 的帮助下，我设法找出了问题所在。

初学者我需要 bootstrap 提供商进入 app.js

ionicBootstrap(MyApp, [ProvinceData]);

@günter-zöchbauer 在正确的轨道上，只是一些小问题，每个参数在返回的数组中都是它自己的数组。感谢大家的帮助。

  static get parameters() {
    return [
      [NavController],
      [ProvinceData]
    ];
  }

之后，它只是简单地放入所需的承诺回调。

在 Angular 2 ES6 上的组件内使用 service/provider

Using a service/provider within component on Angular 2 ES6

angular

ecmascript-6

angular2-services