Есть ли крючок жизненного цикла, например window.onbeforeunload в Angular2?

Ответ 1

<div (window:beforeunload)="doSomething()"></div>

или

@Component({ 
  selector: 'xxx',
  host: {'window:beforeunload':'doSomething'}
  ..
)}

или

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload')
  doSomething() {
  }
}

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

Вы все еще можете использовать

export class AppComponent {  
  constructor() {
    window.onbeforeunload = function(e) {
      return 'Dialog text here.';
    };
  }
}

Как описано здесь https://developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/onbeforeunload

Ответ 2

Ответ Günter Zöchbauer немного ошибочен на two на один счет, это то, что сработало для меня:

@Component({ 
  selector: 'xxx',
  ..
)}
class MyComponent {
  @HostListener('window:beforeunload', ['$event'])
  doSomething($event) {
    if(this.hasChanges) $event.returnValue='Your data will be lost!';
  }
}

Есть два основных отличия от ответа Гюнтера:

• Аргумент @HostListener должен быть window:beforeunload, а не window:onbeforeunload
• Обработчик не должен возвращать сообщение, но должен назначать его вместо $event.returnValue

Ответ 3

Важное примечание для iOS

Событие beforeunload не предполагается - вероятно, из-за высокого уровня "злоупотреблений" в течение многих лет.

Вместо этого вы можете использовать PageHide как рекомендовано Apple.

Это часть API Page visibility.

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Так что я не могу заставить pagehide с пламенем pagehide на настольном Chrome, и я не могу до beforeunload на iOS Safari - так что вам нужны оба - но beforeunload не beforeunload ваш код дважды.

@HostListener('window:beforeunload')
@HostListener('window:pagehide')

Ответ 4

Это сработало для меня. Определено в конструкторе компонента страницы

window.addEventListener("beforeunload", (event) => {
   event.preventDefault();
   event.returnValue = "Unsaved modifications";
   return event;
});

Определите returnValue, только если вы хотите запросить пользователя перед выгрузкой.

Работайте, только если пользователь взаимодействует со страницей (например, нажмите).