Angular 2.0 - Eingespritzte Http-Service

Question

Kommentar undefined - ich schaffte es, dieses Problem zu beheben, finden Sie im unteren Teil dieses Beitrags

ich mein Eckige 1.X Anwendung bin ein Upgrade mit UpgradeAdapter (ngUpgrade). Ich habe einen neuen Angular 2.0-Dienst, den ich von meinem Angular 2.0 Komponente nennen:

Service:

import {Inject} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable'; 

export default class MyService { 
    _http; 
    constructor(http: Http) { 
    this._http = http; //http is undefined here 
    } 

    getData(): Observable<any> { 
    return this._http.get(someUrl); 
    } 
} 

In meinem bootstrap.ts ich habe:

declare var angular: any; 

import {UpgradeAdapter} from 'angular2/upgrade'; 
import {Http} from 'angular2/http'; 

let adapter = new UpgradeAdapter(); 

adapter.addProvider(Http); 

//..... 

adapter.bootstrap(document.body, ['myApp']); 

Was mache ich falsch hier?

EDIT:

Ich bin einen anderen Dienst (Angular 1.X Upgrade-Service) zu meinem Angular 2.0 Service Injektion, und es funktioniert:

import {Inject} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable'; 

export default class MyService { 
    _http; 
    _dataService; 
    constructor(@Inject('dataService') dataService, http: Http) { 
    this._http = http; //http is undefined here 
    this._dataService = dataService; //dataService is defined!! 
    } 

    getData(): Observable<any> { 
    return this._http.get(someUrl); 
    } 
} 

Bootstrap.ts:

declare var angular: any; 

import {UpgradeAdapter} from 'angular2/upgrade'; 
import {Http} from 'angular2/http'; 

let adapter = new UpgradeAdapter(); 

adapter.addProvider(Http); 

adapter.upgradeNg1Provider('dataService'); 

adapter.bootstrap(document.body, ['myApp']); 

BEARBEITEN 2:

Wenn an meinem ES5 suchen durchgesickert Code, den ich diesen Code gefunden:

MyService = __decorate([ 
     core_1.Injectable(), 
     __param(0, core_1.Inject('dataService')) 
    ], MyService); 
    return MyService; 

Wie Sie sehen können - keine http Injektion MyService. Wenn mein Service Konstruktor Eine Änderung dieser Syntax Jetzt verwenden

constructor(@Inject('dataService') dataService, @Inject('Http') http) 

Ich erhalte die folgende Fehlermeldung:

Error: No provider for Http! 

Lösung für das Problem:

So endlich gelingt es mir, einen Anhaltspunkt verwenden von @PierreDuc Antwort:

Ich habe den Konstruktor für MyService geändert:

constructor(@Inject('dataService') dataService, @Inject(Http) http) 

Und ich hinzugefügt HTTP_PROVIDERS als Anbieter auf meine Komponente (die den Dienst verwendet): (in meinem ng 2 Komponente :)

providers: [MyService, HTTP_PROVIDERS]

Keine Notwendigkeit für @Injectable oder addProvider in meinem Bootstrap .

Ich verstehe nicht ganz, warum das passiert und warum diese Lösung funktioniert. Ich werde es gerne erklären lassen, wenn es jemand hier weiß.

Lösung Edit:

Nach einer kleinen Lesung, ich verstehe jetzt DI besser.Ich kann das addProvider(HTTP_PROVIDERS) verwenden, anstatt einen Anbieter für jede Komponente zu definieren (es wird für alle Komponenten verfügbar sein). Das einzige Rätsel, das übrig bleibt, ist, warum das Injizieren von private http: Http nicht funktioniert, während @Inject(Http) http funktioniert. Irgendeine Idee???

Answer 1

Sie sollten die HTTP_PROVIDERS im Bootstrap und nicht nur Http hinzufügen. Versuchen Sie, diese für bootstrap.ts

declare var angular: any; 

import {UpgradeAdapter} from 'angular2/upgrade'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 

let adapter = new UpgradeAdapter(); 

adapter.addProvider(HTTP_PROVIDERS); 

//..... 

adapter.bootstrap(document.body, ['myApp']); 

bearbeiten

und darüber MyService.ts muss eine @Injectable() Dekorateur haben zu lassen Winkel wissen, dass es seine Abhängigkeiten zu injizieren. Der Grund für die Injektion der dataService ist, weil Sie den Dekorateur @Inject verwendet haben. Versuchen Sie, diese für MyService.ts

import {Injectable} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export default class MyService { 

    constructor(private _http: Http) {} 

    getData(): Observable<any> { 
    return this._http.get(someUrl); 
    } 
}