I'm having difficulties establishing a simple connection between an Angular 2 component and service using Observable. I've been trying to achieve this, but I can't seem to get it right.
Here's the scenario: My component HeroViewerComponent is supposed to subscribe to the router parameter id, then pass it to a service called HeroService in order to retrieve a Hero object from the server. The HeroService has a method named getHeroSubscription which takes an Observable<number> as input and returns an Observable<Hero>. However, this setup doesn't seem to be working as intended.
Let's take a look at my implementation of HeroViewerComponent in the file hero-viewer.component.ts:
import { Component, OnInit, OnDestroy } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { Observer } from "rxjs/Observer";
import { Subscription } from "rxjs/Subscription";
import { HeroService } from "./hero.service";
import { Hero } from "./hero";
@Component({
providers: [HeroService]
})
export class HeroViewerComponent implements OnInit, OnDestroy {
private routeParamsSubscription:Subscription;
// Sending data to the service
private routeParamsObservable:Observable<number>;
// Subscribing to the route ID param
private routeParamsObserver:Observer<number>;
// Receiving data from the service
private heroSubscription:Subscription;
// The current hero object
hero:Hero;
constructor(private route:ActivatedRoute, private heroService:HeroService) {}
ngOnInit() {
this.routeParamsObservable = new Observable<number>((observer:Observer<number>) => this.routeParamsObserver = observer);
this.heroSubscription = this.heroService
.getHeroSubscription(this.routeParamsObservable)
.subscribe(
hero => this.hero = hero,
error => console.warn(error)
);
this.routeParamsSubscription = this.route
.params
.subscribe(
params => this.routeParamsObserver.next( +params["id"] ),
error => console.warn(error)
);
}
ngOnDestroy() {
this.routeParamsSubscription.unsubscribe();
this.heroSubscription.unsubscribe();
this.routeParamsObserver.complete();
}
}
Now, let's examine the HeroService defined in hero.service.ts:
import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Observer } from "rxjs/Observer";
import "rxjs/add/operator/merge";
import "rxjs/add/operator/map";
import "rxjs/add/observable/throw";
import "rxjs/add/operator/catch";
import { Hero } from "./hero";
@Injectable()
export class HeroService {
constructor(private http:Http) {}
getHeroSubscription(heroIdObservable:Observable<number>):Observable<Hero> {
let heroObserver:Observer<Hero>;
let heroObservable = new Observable<Hero>((observer:Observer<Hero>) => {
heroObserver = observer;
});
let heroIdSubscription = heroIdObservable.subscribe(
heroId => {
const tmp = this.http
.get("api/heroes/" + heroId)
.map((response:Response) => response.json().data)
.catch((response:any) => {
if (response instanceof Response) {
return Observable.throw(response.json().error);
}
return Observable.throw(response);
});
heroObservable.merge(tmp);
},
error => console.warn(error),
() => {
heroIdSubscription.unsubscribe();
heroObserver.complete();
}
);
return heroObservable;
}
}
Finally, here's the definition of Hero found in hero.ts:
export class Hero {public id: number;}
After reviewing all the code, can you spot where I might have gone wrong?