Question

我对Angular2 / RXJS观察者在订阅时的工作原理有一个大致的了解，但我在某个地方犯了错误。

在我的服务中，我有一个可观察到的可见：

    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();
    }

服务使用以下方法操作observable：

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

我有一个父组件订阅了observable并跟踪其子项对它所做的更改

    ngOnInit() {
        this.loadObjectDetails();
    }

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

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

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

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

到目前为止一切都还好。当子组件订阅父对象可观察时出现问题：

() => this.getHeaders()

当父级更改它正在观察的对象时，子级将被先前观察到的每个对象击中而不是最后一个。因此，在这个孩子的情况下，如果父母观察了3个对象，则当孩子订阅时，会调用3次.getHeaders（）。

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

ReturnsAsync()

但它永远不会被击中。

我已尝试将父订阅放入ngOnInit（）并取消订阅ngDestroy（），但无法订阅此类内容。

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

我希望这是有道理的，先谢谢。

Answer 1

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

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

特别是.getValue（）成员返回可观察流中的最后一个对象。因此，不要让子组件订阅observable，而只是要求最新的值。这样，当他们更新可观察到的蒸汽时，他们就不会自行回收。

Angular2组件订阅不正确的实现

1 个答案: