Wie feuern Sie eine Ajax-Anfrage in Angular 2?

Question

Ich habe Dienst in Angular 2 wie folgt definiert:

import { Inject } from 'angular2/angular2'; 
import { Http ,Headers , HTTP_PROVIDERS } from 'angular2/http'; 

export interface CourseInterface { 
    courseId: number, 
    coursePrice: number, 
    authorName: string 
} 

export class CourseDetailsService { 
    http: Http; 
    constructor(@Inject(Http) Http) { 
     console.log(Http) 
     this.http = Http; 
    } 

    load() { 
     console.log("came here in service") 
     var headers = new Headers(); 
     headers.append('Authorization', <my username password>); 

     this.http.get('https://some.api',{ 
      headers : headers 
     }).map(res => console.log("Response came!!!")) 

     console.log("done . . .") 
    } 
} 

und in einer anderen Komponente, verwende ich diesen Dienst so:

import {CourseInterface, CourseDetailsService} from '../services/course'; 

@Component({ 
    selector: 'dashboard', 
    viewBindings: [CourseDetailsService] 
}) 
@View({ 
    template: ` 
     <h1>Dashboard page laoded</h1> 
    ` 
}) 
export class Dashboard { 
    constructor(service: CourseDetailsService) { 
     service.load(); 
    } 
} 

und während der Anwendung läuft, kann ich meine Dashboard Komponente sehen wird auf dem Bildschirm angezeigt. Aber von der CourseDetailsService werden keine HTTP-Aufrufe ausgelöst.

Aber in der Konsole folgenden gedruckt, um zu sehen, ich könnte die Lage: jede Anfrage an die angegebenen URL gefeuert

came here in service 
done . . . . 

Aber in meinem Chrom Netzwerk Tab, konnte mich nicht in der Lage zu sehen. Wo mache ich Fehler?

Ich bin mit Angular 2 Alpha 47

Answer 1

Grundsätzlich ist der Teil, der die Anforderung selbst es löst die subscribe, so es Sie es hinzufügen müssen arbeiten.

// Service 
load() { 
    var headers = new Headers(); 
    headers.append('Authorization', <my username password>); 

    return this.http.get('https://some.api',{ 
     headers : headers 
    }).map(res => console.log("Response came!!!")) 
} 

// Component 
// 'subscribe' triggers the request! 
service.load().subscribe((result) => /* do something with result */);