首页 文章

Angular2组件订阅不正确的实现

提问于
浏览
1

我对Angular2 / RXJS observable在订阅时的工作原理有一个大致的了解,但我在某个地方犯了错误 .

在我的服务中,我有一个可观察的可用类似:

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

该服务使用以下方法操纵observable:

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

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

ngOnInit() {
        this.loadObjectDetails();
    }

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

到目前为止这一切都还可以 . 当子组件订阅父对象observable时会出现问题:

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

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

当父对象更改它正在观察的对象时,子对象会被先前观察到的每个对象击中而不是仅仅是最后一个对象 . 所以在这个孩子的情况下,如果父母观察了3个对象,那么当孩子订阅时,会调用3次.getHeaders() .

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

() => this.getHeaders()

但它永远不会受到打击 .

我已经尝试将父订阅放在ngOnInit()中并取消订阅ngDestroy(),但它无法订阅任何类似的东西 .

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

我希望这是有道理的,提前谢谢 .

1 回答

  • 0

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

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

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

相关问题