如何使Angular canDeactivate Service等待模态对话框响应？

Question

我在组件内部有一个函数，可以通过评估表单状态来检查是否可以离开路线。如果状态与我要求离开路线的状态相符，则会显示一个对话框以确认或取消。我在canDeactivate服务中调用此函数，但它会在等待对话框确认之前触发响应。

我已经将带有组件功能的console.log放入canDeactivate服务中。如果不需要确认，则按预期显示true。但是，另一方面，当需要确认时，在对话框出现之前它显示为undefined。

canDeactivateService.ts

@Injectable()
export class ProdutosDeactivateGuard implements CanDeactivate<ExampleComponent> {

  canDeactivate(
      component: ExampleComponent,
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): boolean {
      return component.checkStatus();
  }
}

example-component.ts

checkStatus() {
    if (!this.form.pristine && this.form.touched) {
      const dialogRef = this.dialog.open(DeactivateDialogComponent);
      dialogRef.afterClosed().subscribe(result => {
        if (result === 'true') {
          return true;
        } else {
          return false;
        }
      });
    } else {
      return true;
    }
  }
}

我希望服务等待确认。我该怎么办？

Answer 1

您是否尝试过返回可观察值？我在您的代码中看到afterClosed()返回一个。

例如：

@ Injectable（）出口类ProdutosDeactivateGuard实现CanDeactivate {

canDeactivate(
      component: ExampleComponent,
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<boolean> {
      return component.checkStatus();
  }
}

checkStatus() {
    if (!this.form.pristine && this.form.touched) {
      const dialogRef = this.dialog.open(DeactivateDialogComponent);
      return dialogRef.afterClosed().pipe(map(result => {
        return result === 'true';
      }));
    } else {
      return of(true);
    }
  }
}