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

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

0 голосов
/ 16 октября 2019

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

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

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

Я бы хотел, чтобы сервис дождался подтверждения. Как я мог это сделать?

1 Ответ

0 голосов
/ 16 октября 2019

Вы пытались вернуть наблюдаемое? как я вижу в вашем коде 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);
    }
  }
}
...