Angular2 - Ionic 2: Injection in Service не работает

Question

Я начинаю и играю с Ionic2 (написан на Angular2). Мне нужна помощь для решения проблемы с Injection Dependency в моей собственной службе.

Вот мой код

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

Вы должны объявить службу, где вы хотите использовать его

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

Answer 2

Инъекция услуг в ионическом пройти через определение провайдеров, например, @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(); 
    } 
} 

Это будет правильно экземпляр сервиса и сделать его доступным для инъекций

Answer 3

У меня была аналогичная проблема, работая с ионического 2 и угловыми 2. У меня есть app.ts и login.ts и user-data.ts (Как и ваш api.ts).

< app.ts - login.ts < - пользовательский data.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 { 
... 
} 

и пользовательских 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 

Надеется, что это помогает