Блог

Сценарий:

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

Навигация по Xcomponent выглядит следующим образом:

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

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

Навигация по YComponent выглядит следующим образом:

 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)))
                )
        })
    )
  

Эффект:

 @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)))
                    )
            })
        )
  

Например. если пользователь изменит from to параметры X компонента, ROUTER_NAVIGATION действие запускается, и оба XEffect и YEffect перехватывают это действие, и нет необходимости обновлять данные, связанные с компонентом, которые он все еще обновляет.

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

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

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

• Используйте защиту маршрутизатора
• Используйте оператор фильтра RxJS