Angular2-Ionic 2:服务中的注入不起作用

Question

我是初学者，正在玩Ionic2（写在Angular2上）。我需要帮助来解决我自己的服务中的依赖注入问题。

这是我的代码

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
@Injectable()
export class Api {
    constructor(public http: Http) {
        console.log('api', http); // http is always undefined.
    }
}

api = new Api();

在其他情况下，它是有效的。

import {Component, View} from 'angular2/angular2';
import {IONIC_DIRECTIVES} from 'ionic/ionic';
import {Http, Headers} from 'angular2/http';
import {Storage, LocalStorage} from 'ionic/ionic';
@Component({
    selector: 'auth-login'
})
@View({
  templateUrl: 'app/auth_login/auth_login.html',
  directives: [IONIC_DIRECTIVES]
})
export class AuthLogin {
  constructor(http: Http) {
    console.log('login', http); // it works
  }
}

谢谢大家。

Answer 1

Ionic中的服务注入通过例如@App annotation 中的提供者定义

http://jbavari.github.io/blog/2015/10/19/angular-2-injectables/

@App({
  templateUrl: 'app/app.html',
  providers: [DataService]
  /* 
    Here we're saying, please include an instance of 
    DataService for all my children components,
    in this case being sessions, speakers, 
    and session detail.
  */
})
class ConferenceApp {
  constructor(platform: Platform, data: DataService) {
    data.retrieveData();
  }
}

这将正确地实例化服务，并使其可用于注入

Answer 2

您必须将您的服务声明为

@Component({
    selector: 'auth-login',
    providers: [Api]
})

Answer 3

我在使用Ionic 2和Angular 2时遇到了类似的问题。我有一个app.ts、一个login.ts和一个user-data.ts（就像你的api.ts）。

app.ts<-login.ts<-用户数据.ts

当我把UserData类作为提供者放在login.ts和app.ts中时，一切都开始工作了

app.ts是这样的：

@Component({
  templateUrl: 'build/app.html',
  directives: [ROUTER_DIRECTIVES], 
  providers: [
    { 
      provide: TranslateLoader, 
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    },
    TranslateService,
    ROUTER_PROVIDERS,
    UserData
  ]
})

登录.ts类似于此

import {Page, NavController} from 'ionic-angular';
import {UserData} from '../../providers/user-data-provider/user-data';
@Page({
  templateUrl: 'build/pages/login/login.html',
  providers: [UserData]
})
export class LoginPage {
 ...
}

和用户数据.ts类似于此

import {Injectable} from '@angular/core';
import {Storage, LocalStorage, Events} from 'ionic-angular';

@Injectable()
export class UserData { 
   ...
}

我正在使用：

C:ionic2myapp>npm list -depth=0
+-- @angular/common@2.0.0-rc.3
+-- @angular/compiler@2.0.0-rc.3
+-- @angular/core@2.0.0-rc.3
+-- @angular/forms@0.1.1
+-- @angular/http@2.0.0-rc.3
+-- @angular/platform-browser@2.0.0-rc.3
+-- @angular/platform-browser-dynamic@2.0.0-rc.3
+-- @angular/router@2.0.0-rc.2
+-- cordova@6.3.0
+-- del@2.2.0
+-- es6-shim@0.35.1
+-- gulp@3.9.1
+-- gulp-watch@4.3.5
+-- ionic-angular@2.0.0-beta.10
+-- ionic-gulp-browserify-typescript@2.0.0
+-- ionic-gulp-fonts-copy@1.0.0
+-- ionic-gulp-html-copy@1.0.0
+-- ionic-gulp-sass-build@1.0.0
+-- ionic-gulp-scripts-copy@2.0.1
+-- ionic-gulp-tslint@1.1.0
+-- ionic-native@1.3.2
+-- ionicons@3.0.0
+-- ng2-bootstrap@1.0.17
+-- ng2-translate@2.2.2
+-- reflect-metadata@0.1.3
+-- run-sequence@1.1.5
+-- rxjs@5.0.0-beta.6
+-- tslint-ionic-rules@0.0.3
`-- zone.js@0.6.12

希望它能帮助