设想：
我有home一页有两个组件。每个组件都有自己的查询参数。ex XComponent 有查询参数：fromandto和 YComponent 有查询参数：idand 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 组件都有自己的动作、reducer 和 effect。
X效果：
@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)))
)
})
)
Y效果：
@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)))
)
})
)
例如，如果用户将更改 X 组件from to参数，ROUTER_NAVIGATION则触发操作并同时XEffect捕获YEffect此操作，并且不需要更新 Y 组件相关数据，它仍然会更新。
我的目标是，当 X 组件 queryParams 发生变化时，应该更新 X 组件相关数据。而当 Y 组件相关的查询参数将发生变化时，应该只更新 Y 组件相关的数据。
PS我不知道什么是标题的最佳选择。如果您有任何建议，我会更新。