Router Query Params Update

Question

Scenario:

I have one home page with two components. Each component have it's own query parameters. e.x. XComponent have query parameters: from and to and YComponent have query parameters: id and type.

Xcomponent Navigation looks like this:

onFilter(filter) {
    let navExtras: NavigationExtras = {
        queryParams: {
            from:'POD', 
            to: `P${filter}D`
        },
        relativeTo: this.route,
        queryParamsHandling: 'merge',

    }
    this.router.navigate(['home'], navExtras)
}

YComponent navigation looks like:

onFilter(filter) {
    let navExtras: NavigationExtras = {
        queryParams: {
            id: 1, 
            type: 5
        },
        relativeTo: this.route,
        queryParamsHandling: 'merge',

    }
    this.router.navigate(['home'], navExtras)
}

Home screen should be render according this two components.

Both X and Y components have it's own actions, reducer and effect.

XEffect:

 @Effect()
fromRoute$: Observable<Action> = this.actions$
    .pipe(
        ofType<RouterNavigationAction>(ROUTER_NAVIGATION),
        map((action: RouterNavigationAction) => action.payload.routerState['queryParams']),
        switchMap((queryparams: any) => {
            return this.XService.getX(queryparams)
                .pipe(
                    map((data: any) => new treeActions.UpdateXSuccessAction({sports: data})),
                    catchError(err => of(new treeActions.UpdateXFailureAction(err)))
                )
        })
    )

YEffect:

@Effect()
    fromRoute$: Observable<Action> = this.actions$
        .pipe(
            ofType<RouterNavigationAction>(ROUTER_NAVIGATION),
            map((action: RouterNavigationAction) => action.payload.routerState['queryParams']),
            switchMap((queryparams: any) => {
                return this.YService.getY(queryparams)
                    .pipe(
                        map((data: any) => new treeActions.UpdateYSuccessAction({sports: data})),
                        catchError(err => of(new treeActions.UpdateYFailureAction(err)))
                    )
            })
        )

E.x. if user will change X component from to params, ROUTER_NAVIGATION action is fired and both XEffect and YEffect catch this action and there is no needed update Y component related data it still updates.

My goals is that, when X component queryParams will change should update X component related data. And When Y component related query params will change should be updated only Y component related data.

P.S. I cant realize what is the best option for title. If you will have any suggestions I'll update.

Answer 1

From what I see you have two options:

• Use router guards
• Use the RxJS filter operator