Angular2 - Ionic 2：服务注入不起作用答案

【问题标题】：Angular2 - Ionic 2: Injection in Service not workingAngular2 - Ionic 2：服务注入不起作用
【发布时间】：2016-03-28 20:25:28
【问题描述】：

我是初学者，正在玩 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
  }
}

谢谢大家。

【问题讨论】：

您能否更具体地说明您遇到的问题是什么？
抱歉，我知道要解决的信息较少，但我的代码非常简单。我添加了我编写的指令，它有效。
我找到了解决方案。我必须使用依赖注入，而不是构造函数。

标签： angular ionic2

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你必须在你想使用它的地方声明你的服务

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

【讨论】：

或bootstrap(AppComponent, [Api]) 使其在应用程序范围内可用（和单例）
bootstrap() 由 ionic 自己处理，你只需要使用@App和@Page

【解决方案3】：

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

app.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
  ]
})

login.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 {
 ...
}

而user-data.ts是这样的

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


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

我正在使用：

C:\ionic2\myapp>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

希望对你有帮助

【讨论】：