I'm trying to implement this

 public canExit(): boolean {
    return this.form.dirty ? this.confirmCanExitDialog() : true;
  }

 private confirmCanExitDialog(): boolean {
    const dialogRef = this.dialogService.open({
      content: ConfirmDialogComponent,
    });
    const confirmDialog = dialogRef.content.instance as ConfirmDialogComponent;
    confirmDialog.message = 'Confirmation.CanExit';

    dialogRef.result.subscribe((result: DialogCloseResult) => {
      if (result === 'Yes') {
        this._canExitResult$$.next(true);
      }
      if (result === 'No') {
        this._canExitResult$$.next(false);
      }
    });
    return this._canExitResult$$.value;
  }

CodePudding user response：

window.confirm is a blocking call and this is why this code works:

 public canExit(): boolean {
    return this.form.dirty ? window.confirm() : true;
 }

If you want to use non-blocking dialog like kendo, then you have to return Observable/Promise:

canDeactivate(component: any, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.form.dirty ? this.confirmCanExitDialog() : of(true);
}


private confirmCanExitDialog(): Observable<boolean> {
    const dialogRef = this.dialogService.open({
      content: ConfirmDialogComponent,
    });
    const confirmDialog = dialogRef.content.instance as ConfirmDialogComponent;
    confirmDialog.message = 'Confirmation.CanExit';

    return dialogRef.result.pipe(map(x => x === 'Yes'));
  }