Issue
When I am requesting data using route params paramMap
I'm able to get everything working great when it's a single argument. For example, foo.getThing(id)
.
I am struggling how to "observe" multiple arguments though. I need both, my organizationId
and my locationId
to look up a location.
I've been reading through several tutorials and perhaps ForkJoin may be what I need, but all I have seen so far is getting the initial request from something that doesn't take arguments. For example, foo.getStuff()
not foo.getThing(id)
// settings.component.ts
private organizationId!: string;
private locationId!: string;
private organizationId$ = this.activatedRoute.paramMap.pipe(
tap((params) => {
this.organizationId = params.get('organizationId')!;
})
);
private locationId$ = this.activatedRoute.paramMap.pipe(
tap((params) => {
this.locationId = params.get('locationId')!;
})
);
public location$: Observable<ILocation> = this.locationId$.pipe(
switchMap(() =>
this.locationService.getLocation(this.organizationId, this.locationId)
)
);
When I am getting details about my organization, I can just subscribe to the organizationId
. If that changes, the response updates accordingly.
I am trying to accomplish the same for my location. If the organizationId
or locationId
change, I'd like the pipe to re-run and get the correct data.
How can I subscribe to two different observables?
Solution
The question is not "How can I subscribe to two different observables?", but rather, "How can I create an observable from multiple sources, that emits whenever any of the sources emit".
ginalx is right, combineLatest
will help you with this:
private organizationId$ = this.activatedRoute.paramMap.pipe(
map(params => params.get('organizationId')),
distinctUntilChanged()
);
private locationId$ = this.activatedRoute.paramMap.pipe(
map(params => params.get('locationId')),
distinctUntilChanged()
);
public location$ = combineLatest([this.organizationId$, this.locationId$]).pipe(
switchMap(([orgId, locId]) => this.locationService.getLocation(orgId, locId))
);
However, if your only sources both come the route params, it may be simpler to use params
instead of paramMap
since you have access to the full params object (not just a single value):
public location$ = this.activatedRoute.params.pipe(
switchMap(params => this.locationService.getLocation(params.organizationId, params.locationId))
);
Answered By - BizzyBob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.