диалог подтверждения onbeforeunload не отображается при использовании angular2 @HostListener

используя крючок @ HostListener, но подтвердите диалог (который спрашивает: Вы хотите покинуть эту страницу? ...или вы хотите перезагрузить эту страницу?) не показывается.

код работает, но видео не показывает.

вот что у меня есть: 

@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
    console.log("do I see this?") // <---- this logs to the console.

    return "something else";
}

но я не вижу этого:

enter image description here

6
angular angular2-hostbinding

4 ответов

возвращение false вместо строки "something else" устраняет проблему, и отображается диалоговое окно подтверждения.

вполне возможно, что угловые привязки изменяют возвращаемое значение

6

вам нужно вернуть этот

return $event.returnValue = "something";

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

1

для тех, кто все еще ищет другой способ справиться с этим в Angular. Вы можете попробовать сделать это:

<router-outlet (window:beforeunload)="doBeforeUnload()" (window:unload)="doUnload()"></router-outlet>

здесь я добавил события в маршрутизатор событий-выход bucause его единственное в моем приложении.деталь.HTML, но вы можете добавить его в контейнер или оболочку. Также добавлены оба события, потому что один beforeunload будет показывать предупреждение пользователю только при возврате false, а затем unload обрабатывает фактическое событие закрытия. Это важно, потому что вы можете знать, что делать, когда пользователь продолжает или фактически решает закрыть или обрабатывать нежелательные клики. Фактические функции выглядят следующим образом:

doBeforeUnload() {
    // Alert the user window is closing 
    return false;
}

doUnload() {
    // Clear session or do something
    this.auth.getLogout();
}

PD: я проверил это в Angular 6.

1

возвращение false вам нужно вернуться $event.returnValue = "your text"

современные браузеры не показывают введенный текст.

@HostListener('window:beforeunload', ['$event']) 
yourfunction($event) {
    return $event.returnValue='Your changes will not be saved';
}
0