Обновление параметров запроса маршрутизатора - PullRequest
Новая
       22

Обновление параметров запроса маршрутизатора

0 голосов
/ 02 апреля 2019

Сценарий:

У меня есть одна home страница с двумя компонентами. Каждый компонент имеет свои параметры запроса. e.x. XComponent имеет параметры запроса: from и to, а YComponent имеет параметры запроса: id и type.

Xcomponent Navigation выглядит так: 

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

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

Y-компонентная навигация выглядит так: 

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

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

Главный экран должен отображаться в соответствии с этими двумя компонентами.

Оба компонента X и Y имеют свои собственные действия, редуктор и эффект.

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. если пользователь изменит параметры X-компонента from to, будет запущено действие ROUTER_NAVIGATION, и оба параметра XEffect и YEffect перехватят это действие, и нет необходимости обновлять данные, относящиеся к компоненту Y, они все еще обновляются.

Моя цель состоит в том, чтобы при изменении компонента X запроса queryParams обновлялись данные, относящиеся к X компоненту. И когда параметры запроса, связанные с Y-компонентом, изменятся, должны обновляться только данные, относящиеся к Y-компоненту.

P.S. Я не могу понять, что является лучшим вариантом для заголовка. Если будут какие-то предложения я обновлю.

1 Ответ

0 голосов
/ 02 апреля 2019

Из того, что я вижу, у вас есть два варианта:

...