Angular 6: простое подтверждение при выходе из страницы

Question

Мне нужно сделать простое окно подтверждения, и я видел много примеров, как сделать это с помощью дополнительных действий (например, ожидания, пока загрузка файла формы не будет завершена). Но мне просто нужно сделать окно подтверждения по умолчанию с текстом по умолчанию (как на картинке ниже), чтобы показать его, когда пользователь хочет выйти с текущей страницы. И я не могу полностью понять, какую логику я должен доказать при обработке события beforeunload.

Я недавно извиняюсь, если это дублирует какой-то вопрос, однако я не нашел никакого решения. Итак, у меня есть:

example.guard.ts

export interface CanComponentDeactivate {
    canDeactivate: () => Observable<boolean> | boolean;
}

@Injectable()
export class ExampleGuard implements CanDeactivate<CanComponentDeactivate> {

    constructor() { }

    canDeactivate(component: CanComponentDeactivate): boolean | Observable<boolean> {
        return component.canDeactivate() ?
            true :
            confirm('message'); // <<< does confirm window should appear from here?
    }
}

example.component.ts

export class ExampleComponent implements CanComponentDeactivate {

    counstructor() { }

    @HostListener('window:beforeunload', ['$event'])
        canDeactivate($event: any): Observable<boolean> | boolean {
            if (!this.canDeactivate($event)) {
                // what should I do here?
            }
        }
}

Было бы замечательно, если бы вы предоставили образец кода, но я благодарен за любую помощь.

Answer 1

Вы должны различать beforeunload нативное событие на window и canDeactivate guard. Первый срабатывает, когда вы пытаетесь закрыть вкладку / окно. Чтобы при его запуске вы могли запросить пользователя и выполнить event.preventDefault(), чтобы отменить закрытие вкладки / окна.

Говоря о CanDeactivate охраннике, он должен вернуть наблюдаемое / обещание / обычное значение логического значения, которое сообщит вам, можете ли вы деактивировать текущий маршрут.

Так что гораздо лучше разделить два метода (один для beforeunload и второй для охранника). Потому что, если вы хотите, измените поведение, чтобы не просто использовать собственное приглашение, а ваше пользовательское модальное окно, обработчик событий по умолчанию для beforeunload не будет работать, поскольку он обрабатывает код синхронизации. Так что для beforeunload вы можете использовать подсказку только для того, чтобы попросить пользователя не покидать страницу.

loading = true;
@HostListener('window:beforeunload', ['$event'])
canLeavePage($event: any): Observable<void> {
  if(this.loading && prompt('You data is loading. Are you sure you want to leave?')) {
    $event.preventDefault();
  }
}

Охрана в другой руке хочет вернуть логическое значение (или Обещание, или наблюдаемый). Так что здесь вы можете просто вернуть результат вашего состояния:

canDeactivate(): boolean {
  return this.loading && prompt('You data is loading. Are you sure you want to leave?');
}

Так что в вашем CanDeactivate охраннике он будет использоваться как return component.canDeactivate()