Question

在Angular2中是否存在类似window.onbeforeunload的生命周期钩子？我已经在stackoverflow上搜索并搜索了，但没有找到任何内容

Answer 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

Answer 2

GünterZöchbauer的答案在两个计数上略有错误，这对我有用：

@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而不是

Answer 3

iOS的重要说明

不应该假设发生beforeunload事件-可能是由于高度的“滥用” 这些年来。

相反，您可以按照pagehide的建议使用Apple。

这是Page visibility API的一部分。

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

因此，我似乎无法在台式机Chrome上启动pagehide，也无法在iOS Safari上启动beforeunload-因此，您需要两者-但请确保不要启动您的代码两次。

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

Answer 4

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

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

仅当您要在卸载前提示用户时，才定义returnValue。

仅在用户干扰页面（例如点击）时有效。

Answer 5

这不是补充，而是答案，但我现在无法真正发表评论。
我仍然想添加此内容：

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

select p.product_id, max(concat(tf.test_start_date, '|', tf.test_id))
from product p
left join test t on p.product_id = t.product_id
left join test_function tf on t.test_id = tf.test_id

尤其是如果要在卸载之前添加其他逻辑。

在ngOnDestroy上也有一篇不错的文章，其工作原理与指令，管道和服务的析构函数相似。两种方法都很方便，具体取决于您希望执行什么操作。

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

归功于GünterZöchbauer的原始答案

在Angular2中是否存在类似window.onbeforeunload的生命周期钩子？

5 个答案: