注入服务不起作用答案

【问题标题】：Injecting service not working注入服务不起作用
【发布时间】：2016-07-07 09:01:04
【问题描述】：

我在几分钟内创建了一些非常基本且快速的东西，因此很容易复制。

我创建了一个应用程序：

ionic start blank --v2

然后我创建一个提供者：

ionic g provider FacebookFriends

然后我将这段代码放在我的提供程序中：

import {Injectable, Inject} from 'angular2/core';
import {Http} from 'angular2/http';

/*
  Generated class for the FacebookFriends provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class FacebookFriends {
  constructor(@Inject(Http) http) {
    this.http = http;
    this.data = null;
  }

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

    // don't have the data yet
    return new Promise(resolve => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
      this.http.get('path/to/data.json')
        .map(res => res.json())
        .subscribe(data => {
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          this.data = data;
          resolve(this.data);
        });
    });
  }
}

然后我尝试将其注入 app.js：

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {FacebookFriends} from './providers/facebook-friends/facebook-friends';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {}, // http://ionicframework.com/docs/v2/api/config/Config/,
  providers: [FacebookFriends]
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform, private _facebookFriends) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
    });
  }
}

这就是我所做的一切。当我运行 ionic serve 时，我遇到了很多错误。我知道有一个未知的令牌，它指向@Inject 和@Injectable 字。我还在private _facebookFriends 行收到了一个意外令牌。

另外，如果我尝试向构造函数添加一个类型，那么我将拥有 platform:Platform 和 _facebookFriends:FacebookFriends，我也会知道“：”是未知标记。

我实际上只是想从我的 app.js 调用服务，但它不起作用。

【问题讨论】：

签出this answer
谁或在哪里 this -> this.data = null; ?

标签： typescript ionic-framework angular ionic2

【解决方案1】：

Ionic 中默认提供 Http。给构造函数加个参数就够了：

import {Http} from 'angular2/http';


@Injectable
export class FacebookFriends{
  constructor(private http:Http){}
}

【讨论】：

【解决方案2】：

我认为您需要在parameters getter 中添加FacebookFriends：

export class MyApp {
  static get parameters() {
    return [[Platform, FacebookFriends]];
  }

  (...)
}

getter 返回的数组需要匹配你期望在构造函数中的所有参数。如果有两个参数，则数组中需要两个参数。在providers 属性中定义服务仅指定可以注入此服务。要真正注入它，您需要在 parameters getter 中定义它。

您还需要为您的服务定义一个parameters getter：

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

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

  (...)
}

您可以注意到，在 ES6 中，无法在构造函数参数级别使用 @Inject...

【讨论】：