场景：
我有一个包含两个组件的home页。每个组件都有其自己的查询参数。 e.x. 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)))
)
})
)
E.x。如果用户将更改X组件from to参数，则触发ROUTER_NAVIGATION操作，并且XEffect和YEffect都捕获了此操作，并且不需要更新Y组件相关数据仍会更新。
我的目标是，当X组件的queryParams改变时，应该更新X组件的相关数据。并且当Y组件相关的查询参数将改变时，应仅更新Y组件相关的数据。
P.S。我不知道什么是标题的最佳选择。如果您有任何建议，我会更新。