Angular2共享可观察

Question

Doing some experimentation with Angular2 and curious about how to solve a situation where a service exposes a shared observable. Where one component is responsible for getting the data and another is responsible for displaying the data. Here is some code:

The common HttpService responsible for getting the data

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class Service {

  subject = new Subject<string[]>;

  observable$ = this.subject.asObservable();

  constructor(private http: Http) {}

  observable: Observable<string[]>;

  get(link: string): Observable<string[]> {
    this.observable$ = this.http.get('myapi.com')
                    .map((res: Response) => this.subject.next(res.json())
                    .catch(this.handleError);

    return this.observable$;
  }

  /**
    * Handle HTTP error
    */
  private handleError (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

The GetComponent responsible for getting the data

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Service } from '../shared/index';


@Component({
  moduleId: module.id,
  selector: 'get',
  templateUrl: 'get.component.html',
  providers: [Service],
})
export class GetComponent {

  constructor(public service: Service) {}

  submit() {
    this.service.get(this.url).subscribe();
  }
}

The DisplayComponent responsible for displaying the data

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Subscription } from 'rxjs/Subscription';


@Component({
  moduleId: module.id,
  selector: 'display',
  templateUrl: 'display.component.html'
})
export class DisplayComponent {
  subscription: Subscription;

  constructor(public service: Service) {}

  ngOnInit() {
    // the observable is undefined :(
    this.subscription = this.service.observable$.subscribe(data => {
      console.log(data);
    },
    error => {
      // this never gets reached :(
    })
  }
  ngOnDestroy() {
    // prevent memory leak when component is destroyed
    this.subscription.unsubscribe();
  }
}

This design works ok except the error handling does not work for the DisplayComponent . Also the map function in the HttpService doesn't seem quite right this.subject.next(res.json()

Also it doesn't seem quite right that the GetComponent has to "subscribe" like this this.service.get(this.url).subscribe();

What is the proper way to design this sort of thing? How can I get the DisplayComponent to observe errors thrown by the HttpComponent

Answer 1

Your code has several problems where Service.$observable is modified several times:

observable$ = this.subject.asObservable();
this.observable$ = this.http.get('myapi.com') .... // remove this line

The right way to do this: Get Component calls Service to get data. After data is loaded, Get Component emits a Data Ready event with the data. Display Component , and other components that use this data, listen to DataReady event and update data when the event is emitted.

Code to explain my answer:

@Injectable()
export class GetService {
  /// subject
  subject = new Subject<string[]>()

  /// the observable
  observable = this.subject.asObservable()


  constructor(private $http: Http) {

  }

  /// get data
  getData() {
    // not override observable here
    this.$http.get("api.com")
      .map(response => response.json()) // map the data
      .subscribe((data: string[]) => this.subject.next(data), // emit data event
              error => this.subject.error(error)) // emit error event
  }
}