我对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 回答
我能够使用RXJS库中的BehviourSubject来解决这个问题:
https://xgrommx.github.io/rx-book/content/subjects/behavior_subject/index.html
特别是.getValue()成员返回可观察流中的最后一个对象 . 因此,不要让子组件订阅observable,而只是要求最新的值 . 这样,当他们更新可观察到的蒸汽时,他们不会自行回收 .