NGXS ofAction 不会在 Angular 解析器服务内部触发答案

【问题标题】：NGXS ofAction is not triggered inside of Angular resolver serviceNGXS ofAction 不会在 Angular 解析器服务内部触发
【发布时间】：2019-11-02 17:08:47
【问题描述】：

我正在尝试实现一个解析器，它将首先调度操作以从服务器检索所有数据，然后我尝试捕获两个流 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
        }
    })
];

【问题讨论】：

标签： angular ngxs

【解决方案1】：

我最终解决了这个问题。问题出在我获取所有sportTypes 的“异步”方法中。

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

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

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

【讨论】：