Как заставить Angular canDeactivate Service ждать ответа модального диалога?

Question

У меня есть функция внутри компонента, чтобы проверить, могу ли я покинуть маршрут, оценив статус формы. Если статус соответствует условию, которое мне нужно попросить покинуть маршрут, появляется диалоговое окно для подтверждения или отмены. Я вызываю эту функцию внутри службы canDeactivate, но она вызывает ответ до того, как дождется подтверждения диалога.

Я уже поместил console.log в службу canDeactivate с функцией компонента. Когда подтверждение не требуется, оно отображается как ожидалось. Но с другой стороны, когда требуется подтверждение, перед появлением диалогового окна отображается значение undefined.

canDeactivateService.ts

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

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

пример-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);
    }
  }
}