Angular2 组件订阅不正确的实现

Question

我大致了解 Angular2/RXJS 可观察对象在订阅时的工作方式，但我在某处犯了错误。

在我的服务中，我有一个可用的 observable，如下所示：

    // Source
    private objectDetailsCache = new Subject<ObectDetails>();
    // Stream
    public objectDetails$ = this.objectDetailsCache.asObservable().cache();

服务使用这些方法操作可观察对象：

    updateObject(object: ObjectDetails): Observable<ObjectDetails> {

    let objectMapped = this.mappingService.mapObjectDetailsToObject(object);

    this._HTTPService.update(this._objectUrl + object.id, objectMapped)
        .subscribe(o => {
            this.objectDetailsCache.next(o);
        });
    return this.objectDetails$.last();
    }

    getObjectDetails(id: number): Observable<ObjectDetails> {
    this._HTTPService.get(this._objectUrl + id + '/details')
        .subscribe(o => {
            this.objectDetailsCache.next(o);
        })
    return this.objectDetails$.last();
    }

我有一个 parent 组件，它订阅了 observable 并跟踪它的 children

对其所做的更改

    constructor(private objectService: ObjectService) {
    objectService.objectDetails$.subscribe(o => this.object = o);
}

然后组件告诉应用程序它想要观察哪个object：

    ngOnInit() {
        this.loadObjectDetails();
    }

    loadObjectDetails() {
        this.sub = this.route.params.subscribe(params => {
            let id = +params['id'];
            this.objectService.getObjectDetails(id)
                .subscribe(
                o => {  },
                error => { });
        });
     }

到目前为止一切正常。当 child 组件订阅 parent 的 object observable 时，问题就来了：

    ngOnInit() {
       this.sub = this.objectService.objectDetails$.subscribe(
            o => {
                this.object = o;
                this.getHeaders()
            }
       );
    }

    ngOnDestroy(){
        this.sub.unsubscribe();
    }

当 parent 改变它正在观察的 object 时，child 会被之前观察到的每个 object 击中，而不仅仅是最后一个。所以在这个 child 的情况下，如果 parent 观察到 3 objects this.getHeaders() 在 child 订阅时被调用 3 次。

我尝试将 child 方法移动到订阅的完整部分：

() => this.getHeaders()

但它永远不会被击中。

我试过将 parent 订阅放在 ngOnInit() 中，然后在 ngDestroy() 中取消订阅，但它无法订阅任何类似的东西。

任何关于我如何调整我的处理方式的建议都会很棒。

我希望这是有道理的，提前致谢。

Answer 1

我能够使用 RXJS 库中的 BehviourSubject 解决这个问题：

https://xgrommx.github.io/rx-book/content/subjects/behavior_subject/index.html

特别是 .getValue() 成员 returns 可观察流中的最后一个对象。因此，与其让子组件订阅可观察对象，不如让它们只请求最新的值。这样，当他们更新可观察到的蒸汽时，他们不会自行回收。

Angular2 组件订阅不正确的实现

Angular2 Component subscription incorrect implementation

angular

caching

rxjs

observable

subscribe