删除 angular 中的 beforeunload 事件

Question

我正在尝试使用 window.removeEventListener 删除事件，我使用 window.addEventListener 添加了事件 beforeunload，但它没有被删除。我正在尝试遵循代码

addAlertWithListener(){

   window.addEventListener('beforeunload', (event) => {
     // Cancel the event as stated by the standard.
     event.preventDefault();
     // Chrome requires returnValue to be set.
     event.returnValue = 'You are currently in edit mode. Are you sure you want to refresh the page?';
  
   },true);
}

正在添加它，但是当我尝试使用以下代码删除相同的功能时：

 removeAlertWithListener() {
    window.removeEventListener('beforeunload', null,true);
  }

它仍然给出警报信息。我在这里错过了什么吗？我尝试使用和不使用最后一个参数。 None 的东西似乎在这里工作。

Answer 1

addEventListener 和 removeEventListener 在 JavaScript 中以一种奇怪的方式实现，它们需要完全相同的参数才能检索已注册的侦听器。这与返回 id 的 setTimeout 不同。

在Angular，通常我会这样做：

private readonly BEFORE_UNLOAD_PARAMS = ['beforeunload', (event) => ..., true];
private isBeforeUnloadActive: boolean = false;

addAlertWithListener() {
   if (this.isBeforeUnloadActive) return;
   window.addEventListener(...this.BEFORE_UNLOAD_PARAMS);
   this.isBeforeUnloadActive = true;
}

removeAlertWithListener() {
   window.removeEventListener(...this.BEFORE_UNLOAD_PARAMS);
   this.isBeforeUnloadActive = false;
}

该标志将防止侦听器被注册两次

删除 angular 中的 beforeunload 事件

Removing beforeunload event in angular

javascript

onbeforeunload

angular