多次调用对话框的订阅在使用 Ngrx - Angular 更改状态后打开两次

Question

对话框多次打开，因为在 ngrx 状态突变后调用订阅两次/多次。

1. 尝试使用 takeUntil(loadComplete( 和 loadComplete = new BehaviorSubject(false(，但不适用于我的逻辑。因为至少一次应在作业状态为"已完成"之后调用此订阅。

2. 尝试使用 take(1(，因为我正在轮询以获取进度状态，在使用 take 1 首次订阅后无法获取。所以添加了 isCompleteDialogOpen 标志来控制多个订阅对话框打开一次。 但是每次订阅被调用时都是isCompleteDialogOpened！false

   if(uploadStatus.jobStatus === 'COMPLETED' && !this.isCompleteDialogOpened)
   

即使我在第一次订阅时将其设置为 true，在 openUploadCompleteDialog(( 方法调用 isCompleteDialogOpened 在第二次订阅时也是假的，因此对话框多次打开。

isCompleteDialogOpened = false;   // -->Init as false
ngOnInit() {
this.pollUploadStatus(); // --> Oninit call for subscription method
}
pollUploadStatus() { // --> uploadStore ngrx store when selectCurrentJob mutates this is subscribed
this.uploadStore.select(selectCurrentJob)
.pipe(filter(uploadJob => !!uploadJob && !!uploadJob.jobStatus))
.subscribe((uploadJob) => { // --> Subscription called multiple times
const uploadStatus = uploadJob.jobStatus;

// --> this.isCompleteDialogOpened remains false even if i set true when
// --> the dialog is opened on first subscription How to maintain the state 
// --> of 'isCompleteDialogOpened'  on each subscription so that when the second
// -->  subscription made it is set true and condition fails

if (uploadStatus.jobStatus === 'COMPLETED' && !this.isCompleteDialogOpened) {
this.openUploadCompleteDialog(); // --> upload dialog box is called twice
}             
}

openUploadCompleteDialog(): void {
this.isCompleteDialogOpened = true; // --> set true after dialog open on subscription
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: ....
});
dialogRef.afterClosed().subscribe(result => {
const message = this.translate
.instant('upload-success');
this.openUploadSnackBar(true, message);
this.router.navigateByUrl('car/add-update/car-history');
});
}
ngOnDestroy() {
this.uploadStore.dispatch(stopPolling({}));
this.destroy$.next();
this.destroy$.complete();
}

可能是重复的 如何在对服务/商店的响应具有特定参数/值后停止订阅，但 taketill 不适用于我的逻辑

有没有办法在状态更改为"已完成"后打开一次对话框基于标志，如果是标志如何在每个订阅或其他东西上维护状态。任何帮助都会很棒。

使用 Angular8， Rxjs 6.5.2.

Answer 1

Dunno 为什么select太频繁地开火，但在这里

pollUploadStatus() { // --> uploadStore ngrx store when selectCurrentJob mutates this is subscribed
this.uploadStore.select(selectCurrentJob)
.pipe(filter(uploadJob => !!uploadJob && !!uploadJob.jobStatus))

在filter之后向管道添加distinctUntilChanged(可能使用自定义匹配器，因为流包含对象，而不是基元(应该可以解决问题。

Answer 2

仅供参考：当我导航到其他选项卡返回时，此订阅仍未订阅，这就是问题所在。DistinctUntilChanged 通过打印日志和删除这些标志来帮助我找到主要问题，并使我的代码干净。

private destroy$ = new Subject<void>();
pollUploadStatus() {
this.uploadStore.select(selectCurrentJob)
.pipe(filter(uploadJob => !!uploadJob && !!uploadJob.jobStatus),
distinctUntilChanged((prev, curr) =>
prev.jobStatus.percentComplete === curr.jobStatus.percentComplete),
takeUntil(this.destroy$))
.subscribe((uploadJob) => {
const uploadStatus = uploadJob.jobStatus;
if (uploadStatus.jobStatus === 'COMPLETED') {
this.openUploadCompleteDialog(); --> this.router.navigateByUrl('car/add-update/car-history');
}
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}