Angular解析器服务内部不会触发操作的NGXS



我正在尝试实现一个解析器,它将首先调度操作以从服务器检索所有数据,然后我尝试捕获两个流responseOK和responseError,然后从解析器返回哪个流首先发出值。这个设置的灵感来自github上的以下答案https://github.com/ngrx/store/issues/270#issuecomment-317232654

这是我的解析器:

@Injectable({
providedIn: "root"
})
export class ScheduleAdministrationResolver
implements Resolve<Observable<Schedule.FetchAllSportTypesSuccess | Schedule.FetchAllSportTypesFailed>> {
constructor(private store: Store, private actions$: Actions, private router: Router) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
):
| Observable<Schedule.FetchAllSportTypesSuccess | Schedule.FetchAllSportTypesFailed>
| Observable<Observable<Schedule.FetchAllSportTypesSuccess | Schedule.FetchAllSportTypesFailed>>
| Promise<Observable<Schedule.FetchAllSportTypesSuccess | Schedule.FetchAllSportTypesFailed>> {
this.store.dispatch(new Schedule.FetchAllSportTypes());
const responseOK = this.actions$.pipe(ofAction(Schedule.FetchAllSportTypesSuccess));
const responseError = this.actions$.pipe(
ofAction(Schedule.FetchAllSportTypesFailed),
tap(() => this.router.navigate([""]))
);
console.log("Inside SportType resolver");
return race(responseOK, responseError).pipe(first());
}
}

this.store.dispatch(new Schedule.FetchAllSportTypes());方法最终调用fetchAllSportTypes(),看起来像这样:

fetchAllSportTypes(): Observable<SportType[]>{
return of([{...}, {...}])
}

一切都按预期工作,并按预期触发。但是,解析器永远不会完成。race方法内部的流似乎从未发出任何值。我确实知道Schedule.FetchAllSportTypesSuccess操作在触发时会被调度到控制台。

我不明白为什么ofAction没有按预期触发。

其他信息:这是在懒惰加载的管理功能中。我以以下方式连接NGXS:

app.module.ts;
imports: [
...NgxsModule.forFeature([SportTypeState]),
NgxsModule.forRoot([], {
developmentMode: true,
selectorOptions: {
suppressErrors: false,
injectContainerState: false
}
})
];

我最终解决了这个问题。问题出在我的"async"方法内部,该方法正在获取所有sportTypes

fetchAllSportTypes(): Observable<SportType[]>
{
return of([{...}, {...}])
}

上述方法在解析器内部不起作用。添加.pipe(delay(1000))最终按预期工作。

fetchAllSportTypes(): Observable<SportType[]>
{
return of([{...}, {...}]).pipe(delay(1000))
}

最新更新