Question

我正在努力让我的组件中的服务工作，但对于我的生活经过多次迭代和耗尽谷歌的资源我还没有能够让它工作，即使它与基本上每个例子一致我已经找到。我的最后一次尝试是使用离子发生器来生成提供者，但仍然无效。

服务

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}`);
  }

}

我无法弄清楚我错过了什么，控制台抛出了一个巨大的堆栈跟踪错误，这个错误和“发生了什么事情”一样有用，所有它真的让我觉得我的功能显然不是一个功能。

错误摘录：

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

您需要像EventService一样注入NavController。您刚刚分配了类型变量。您至少需要使用= 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的帮助下，我设法解决了问题所在。

Starters我需要将提供程序引导到app.js

ionicBootstrap(MyApp, [ProvinceData]);

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

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

之后，它只是简单地将所需的承诺召回。

在Angular 2 ES6上使用组件内的服务/提供程序

2 个答案: