javascript - RxJS Observable merge angular -
i have sandbox subscribes stream of messages , want filter stream find messages have been sent or received specific user using route params specified in component.
messages.sandbox.ts:
messages$: observable<array<message>> = this.store.select(state => state.data.messages); fetchreceived(id: string): observable<array<message>> { return this.messages$.map((messages: any) => { return messages.filter((message: message) => { return message.recipientid == id; }); }); } fetchsent(id: string): observable<array<message>> { return this.messages$.map((messages: any) => { return messages.filter((message: message) => { return message.userid == id; }) }) }
messages.detail.container.ts
sentmessages$ = new observable<array<message>>(); receivedmessages$ = new observable<array<message>>(); matchingmessages$ = new observable<array<message>>(); ngoninit() { this.route.params.subscribe((params: params) => { this.sentmessages$ = this.sb.fetchreceived(params['id']); this.receivedmessages$ = this.sb.fetchsent(params['id']); this.matchingmessages$ = observable.merge(this.sentmessages$, this.receivedmessages$); }); }
this.matchingmessages$ seems include this.receivedmessages$ know this.sentmessages$ not null can use in template without problem.
am missing merging observables? better create single fetchmessages method filters either userid or recipientid equalling route param id? if how go that?
thanks!!
you have right general idea. few flaws.
- never use
new observable<t>()
. not think does. pretty not useful. construct observables factory methods or other observables - you need transform params observable new observable using operator. problem subscribe params observable, , construct new observables each time. other code have subscribed initial observables never see changes.
so want this:
sentmessages$ : observable<array<message>>; receivedmessages$ : observable<array<message>>; matchingmessages$ : observable<array<message>>; ngoninit() { const params$ = this.route.params; // use switchmap map new params new sent observable // each time params change, unsubscribe old fetch , subscribe // new fetch. subscribed "sentmessages" see // change transparently this.sentmessages$ = params$.switchmap((params: params) => this.sb.fetchreceived(params['id'])); // same received this.receivedmessages$ = params$.switchmap((params: params) => this.sb.fetchsent(params['id']))); // merge 2 streams this.matchingmessages$ = observable.merge(this.sentmessages$, this.receivedmessages$); }
edit:
to answer other question: better create single observable matches senders , receivers: depends upon use case. here how go it:
messages.sandbox.ts:
fetcheither(id: string): observable<array<message>> { return this.messages$.map((messages: any) => { return messages.filter((message: message) => { return message.recipientid == id || message.userid === id; }); }); }
container:
matchingmessages$ : observable<array<message>>; ngoninit() { const params$ = this.route.params; // use switchmap map new params new either observable // each time params change, unsubscribe old , subscribe // new fetch. subscribed "matchingmessages" see // change transparently this.matchingmessages$ = params$.switchmap((params: params) => this.sb.fetcheither(params['id'])); }
Comments
Post a Comment