Beobachtbare Kette in Angular 2

Question

Ich bin ein Neuling in Angular2 und brauche Hilfe bei Observablen.

Ich habe Web-App, die einige Daten von Remote-Ressource erhalten und es Benutzern zeigen.

Das Problem ist, dass ich Daten mit http erhalten sollte, speichern Sie es lokal und danach von anderen Komponenten.

Ich habe versucht nächste Schema:

data.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class Airports { 
    private airportsUrl: string; 
    private cities: any; 
    private countries: any; 
    private routes: any; 
    private rawData: Observable<any>; 
    private errorMessage: any; 

    constructor(private http: Http) { 
     this.airportsUrl = ''; 
    } 

public get Cities() { 
    this.serverData.publishLast().refCount().subscribe(
     data => this.cities = JSON.stringify(data) 
    ); 
    return this.cities; 
} 

public get Countries() { 
    this.serverData.publishLast().refCount().subscribe(
     data => this.countries = JSON.stringify(data) 
    ); 
    return this.countries; 
} 

public get Routes() { 
    this.serverData.publishLast().refCount().subscribe(
     data => this.routes = JSON.stringify(data) 
    ); 
    return this.routes; 
} 

private init() { 
    this.serverData 
     .subscribe(
      data => this.rawData = data, 
      error => this.errorMessage = <any> error 
     ); 
} 
private get serverData() { 
    return this.http 
     .get(this.airportsUrl) 
     .map(this.parseData) 
     .catch(this.handleError); 
} 
private parseData(res: Response) { 
    let body = res.json(); 
    return body; 
} 
private handleError (error: any) { 
    let errMsg = (error.message) ? error.message : 
    error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 
} 

controler.ts

import '../../../public/css/styles.css'; 
import { Component, OnInit } from '@angular/core'; 

import { Airports } from './../data/data'; 

@Component({ 
    providers: [Airports], 
    selector: 'destination-selector', 
    styleUrls: ['./../views/view.cityselector.css'], 
    templateUrl: './../views/view.cityselector.html', 
}) 
export class CitySelector implements OnInit { 
    private cities: any; 
    private countries: any; 
    private routes: any; 

    constructor(private airports: Airports) { } 

    public ngOnInit() { 
     this.cities = this.airports.Cities; 
     this.countries = this.airports.Countries; 
     this.routes = this.airports.Routes; 
    } 
} 

view.cityselector.html

<main> 
    <div>Cities: {{ cities }}</div> 
    <div>Countries: {{ countries }}</div> 
    <div>Routes: {{ routes }}</div> 
</main> 

Aber mit diesem Schema I http 3-mal (statt 1) ​​nennen, und diesen Wert {{ cities }} undefiniert

So, wie ich Daten von http, stroe es bis zu einem gewissen lokalen Variablen bekommen, und verwende lokale Daten danach, stattdessen ruft immer neue http

Answer 1

Ich denke, das ist, weil http.get in Angular2 gibt eine beobachtbare, die nicht wirklich irgendwelche Daten erhalten, bis Sie subscribe darauf abonnieren. Dann jedes Mal, wenn Sie anrufen, abonnieren Sie eine neue HTTP-Anfrage. Ich denke stattdessen solltest du dein http.get sofort abonnieren und es einmal in eine Variable in deinem Dienst setzen. Dann lassen Sie Ihre Dienste öffentliche Funktionen eine Observable des Wertes dieser Variablen zurückgeben.

This article by Cory Rylan was very helpful und ich begann mit dem Datendienst, an dem ich arbeitete.

Ich habe so etwas gemacht, wo mein Dienst eine Reihe von Daten für den Rest der App verwaltet. Dann in den Komponenten, die die Daten verwendet, würde ich das Data importieren und

@Injectable 
 
export class DataService { 
 
    constructor(private http: Http){ 
 
    this.loadData(); 
 
    } 
 
    private _url = 'http://yoururlhere.com:3000/api/path'; 
 
    public _appData$: BehaviorSubject<any[]> = new BehaviorSubject([]); 
 
    private appData:any[] = []; 
 

 
    loadData() { 
 
    console.log('Making HTTP request, loading data...'); 
 
    this.http.get(this._url).map(this.extractData).subscribe(
 
     data => { 
 
     this.appData = data; 
 
     this._appData$.next(data); 
 
     }, 
 
     error => { 
 
     console.log(error); 
 
     } 
 
    ); 
 
    } 
 

 
    addData(newData){ 
 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
 
    let options = new RequestOptions({ 
 
     headers: headers 
 
    }); 
 
    
 
    this.http.post(this._url, newData, options).map(this.extractData).subscribe(data => {this.appData.push(data); this._appData$.next(this.appData);}); 
 

 
    } 
 
    getData(){ 
 
    return Observable.from(this._appData$); 
 
    } 
 

 
    private extractData(res: Response) { 
 
    let body = res.json(); 
 
    return body || {}; 
 
    } 
 
}