Question

我一直试图在角度2组件和服务之间建立一个简单的关系，但我无法弄清楚如何使用Observable这样做。

我的组件HeroViewerComponent订阅路由器参数id，并在服务从服务器获取时将其传递给服务HeroService以获取Hero。 HeroService有一个名为getHeroSubscription的方法，该方法将Observable<number>作为参数并返回Observable<Hero>。但它不起作用。

以下是HeroViewerComponent中的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;

    // to the service
    private routeParamsObservable:Observable<number>;

    // the subscriber of the route ID param
    private routeParamsObserver:Observer<number>;

    // from the service
    private heroSubscription:Subscription;

    // the current hero
    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();
    }
}

以下是HeroService中的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;
    }
}

这是Hero中的hero.ts：

export class Hero {public id: number;}

我的错误在哪里？

Answer 1

我想，可能的问题是，heroObservable.merge(tmp)并没有改变heroObservable，但会返回新的observable，这会在代码中丢失。

尝试将其存储在任何变量中并返回getHeroSubscription方法，而不仅仅是return heroObservable

使用Observable在角度2组件和服务之间进行双向绑定

1 个答案: