Question

我有一个列表，每个项目/作业都显示在一个有角的材质扩展器面板中。

当用户打开其中一个扩展器时，我会调用API并获取要显示在扩展器主体中的信息。还有一种池化机制，每分钟刷新一次API中的数据。

我需要启动订阅，进行http调用并开始轮询，仅适用于打开的扩展器，取消订阅并在用户关闭任何扩展器时停止轮询

在组件中-角材料扩展器面板：

ngOnChanges() {
    if (this.panelOpenState === true) {
      this.currentStatus$ = this.store.pipe(select(fromJobs.getcurrentRunStatus(this.jobIDSelected)));   
    }
    if (this.panelOpenState === false) {
      this.store.dispatch(new Cancel_Refresh_Execution_Statuses(this.jobIDSelected));
    }
  }

我的问题出在效果上，当添加参数以仅针对JOB_ID取消操作时，当扩展面板关闭此项目/作业时，它给我一个错误：'无法调用类型缺少调用的表达式签名。类型'String'没有兼容的呼叫签名。'

这是我的取消操作：

export class Cancel_Refresh_Execution_Statuses implements Action {
  readonly type = JobsActionType.CANCEL_REFRESH_EXECUTION_STATUSES;
  constructor(public jobId: string) {}
}

  @Effect()
  refreshCurrentExecutedJobStatuses$: Observable<Action> = this.actions$.pipe(
    ofType<jobActions.LoadJobStatusExecuted>(jobActions.JobsActionType.LOAD_JOB_STATUS_EXECUTED),
    mergeMap(
      (actions: jobActions.LoadJobStatusExecuted) =>
        timer(1000, 60000).pipe(
          concatMap(() =>
            from(
              this.jobsService.fetchJobsRunningStatus$(actions.param).pipe(
                takeUntil(
                  this.actions$.pipe(
                    ofType<jobActions.Cancel_Refresh_Execution_Statuses>(
                      //GETTING AN ERROR HERE: I CAN'T ADD A PARAM WITH THE JOB_ID 
                      //THAT I NEED TO CANCEL THE POLLING AND SUBSCRIPTION
                      jobActions.JobsActionType.CANCEL_REFRESH_EXECUTION_STATUSES(actions.param)
                    )
                  )
                ),
                map((lastRefreshStatus: Status) => new jobActions.JobsStatusExecutedSuccess(lastRefreshStatus)),
                catchError(err => of(new jobActions.JobsStatusExecutedFail(err)))
              )
            )
          )
        ) //end timer
    )
  );

非常感谢！

Answer 1

ofType过滤操作流，并具有类型作为参数，而不是函数。

this.actions$.pipe(ofType(jobActions.JobsActionType.CANCEL_REFRESH_EXECUTION_STATUSES))

Answer 2

可能的解决方案是在显示视图的组件中设置轮询和订阅/取消订阅：

ngOnInit() {
  this.store.dispatch(new refreshJobLastStatus(this.jobId));
  this.currentStatus$ = this.store.pipe(select(fromJobs.refreshLastStatus(this.jobId)));
}

ngOnChanges() {
  if (this.panelOpenState) { 
    this.currentStatus$ = this.store.pipe(select(fromJobs.refreshLastStatus(this.jobId)));//here
    const timerRefreshJobStatuses = this.runtimeConfig.appConfig.jobsPollingRefreshStatus || 60000;
    this.statusesSub = timer(1000, timerRefreshJobStatuses).subscribe(() =>
      this.store.dispatch(new refreshJobLastStatus(this.jobId))
    );
     this.currentStatus$ = this.store.pipe(select(fromJobs.refreshLastStatus(this.jobId)));//?
  if (this.panelOpenState !== true) {
    if (this.statusesSub) {
      this.statusesSub.unsubscribe();
    }
  } 
}

Angular / NgRx-效果：关闭角度扩展面板时取消订阅和轮询

2 个答案: