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

【问题标题】：Angular/NgRx - effect: Cancel subscription and polling when angular expansion panel is closedAngular/NgRx - 效果：Angular 扩展面板关闭时取消订阅和轮询
【发布时间】：2020-06-22 22:33:10
【问题描述】：

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

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

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

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

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
    )
  );

非常感谢！

【问题讨论】：

调用关闭操作面板时，只需使用 unsubscribe()

标签： angular ngrx polling effect

【解决方案1】：

ofType 过滤动作流并且有一个类型作为参数，而不是一个函数。

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

【讨论】：

【解决方案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();
    }
  } 
}

【讨论】：