Angular2 中是否有像 window.onbeforeunload 这样的生命周期钩子？

Question

Angular2 中是否有类似window.onbeforeunload 的生命周期钩子？我已经在 Whosebug 上进行了 google 和搜索，但一无所获

Answer 1

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

或

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

或

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

这是监听全局事件的方法。我不知道是否支持此事件的特殊行为，其中 return 值用作构造对话框的文本。

您仍然可以使用

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

就像这里解释的那样https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Answer 2

Günter Zöchbauer 的回答在两个上略有错误，这对我有用：

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

与 Günter 的回答有两个主要区别：

~~@HostListener 的参数应该是 window:beforeunload 而不是 window:onbeforeunload~~
处理程序不应 return 消息，而应将其分配到 $event.returnValue 而不是

Answer 3

iOS

的重要提示

不应该发生 beforeunload 事件 - 可能是由于 'abuse' 的高级别多年来。

您可以使用 pagehide as recommended by Apple。

这是 Page visibility API 的一部分。

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

所以我似乎无法让 pagehide 在桌面 chrome 上启动，我也无法让 beforeunload 在 iOS Safari 上启动 - 所以你两者都需要 - 但确保不要触发你的代码两次。

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

Answer 4

这对我有用。在页面组件构造函数中定义

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

定义 returnValue 仅当你想在卸载前提示用户。

仅当用户与页面交互（例如单击）时才起作用。

Answer 5

这更像是一个补充说明而不是一个答案，但我现在不能真正发表评论。
不过，我想补充一下：

我不会说初始化逻辑太复杂，但是如果您决定在组件初始化时添加事件侦听器，最好将其包含在 ngOnInit 而不是构造函数中：

window.addEventListener('beforeunload', function (e) {
  e.preventDefault();
  e.returnValue = '...';
});

如果您在卸载前包含其他逻辑，则尤其如此。

ngOnDestroy 上还有一篇很好的文章，它的工作方式类似于指令、管道和服务的析构函数。这两种方法都很方便，具体取决于您希望执行的操作。

完整 link 文本：
https://wesleygrimes.com/angular/2019/03/29/making-upgrades-to-angular-ngondestroy.html

归功于 Günter Zöchbauer 的原始回答

Answer 6

在angular中我们可以创建这样的东西。

@HostListener('window:beforeunload')
confirmLeavingPageBeforeSaving(): boolean {
  // if 0 display dialog
  // if 1 you can reload
  return !this.myBoolean; 
}

Answer 7

如果有人正在寻找如何添加和删除侦听器。

 ngOnInit(){
  /*
   * Ask user if they are sure they want to refresh
    * -> Works only if the user interacts with the page (e.g. click).
  */
   window.addEventListener('beforeunload', this.promptIfSureToRedirect, false);
 }

promptIfSureToRedirect(event) {
    event.preventDefault();
    event.returnValue = 'Changes you made may not be saved.';
    return event;
}


 ngOnDestroy(){
   window.addEventListener('beforeunload', this.promptIfSureToRedirect, false);
 }

在一个组件中，监听事件“beforeunload”，然后传递一个将在卸载之前调用的函数。在销毁时，通过传递用于侦听的相同函数来删除此侦听器。

// -> 我想请@Nicolas 和@Umutesen 指点一下

其他指针：

->一定要和“window”元素中的事件监听器一起工作，不要和document互换；例如 document.addEventListener.

Angular2 中是否有像 window.onbeforeunload 这样的生命周期钩子？

Is there any lifecycle hook like window.onbeforeunload in Angular2?

lifecycle

angular