当用户以角度关闭选项卡时调用函数答案

【问题标题】：Call a function when user closes tab in angular当用户以角度关闭选项卡时调用函数
【发布时间】：2021-08-28 08:38:20
【问题描述】：

我想在用户关闭选项卡时调用一个函数。当用户关闭选项卡并出现带有取消和离开按钮的弹出窗口时，我使用 hostlistener 触发事件。当用户单击离开按钮时，我需要调用一个函数。下面是我写的代码，当用户点击离开按钮时我需要调用 myFunction()。

@HostListener('window:beforeunload', ['$event'])
 beforeunloadHandler(event) {
 event.preventDefault();
 return false;   
}

myFunction(){
 //code
}

【问题讨论】：

标签： javascript angular angular6 angular7 angular10

【解决方案1】：

如果您正在更改选项卡，您可以尝试 ngOnDestroy，然后此方法将调用，您可以调用您的函数！！

ngOnDestroy(): 无效 { enter code here }

【讨论】：

【解决方案2】：

有两种方法可以监听类中关闭选项卡的事件，通过使用键 this 调用您的函数。

 @HostListener('window:unload', [ '$event' ])
   beforeUnloadHandler(event) {
   this.myFunction(event)
   event.preventDefault();
   return false;   
  }
  unloadHandler(event) {
    this.myFunction(event)
    // ...
  }

 
  

myFunction(event){
 console.log("this event come form: ", event)
}

【讨论】：

这个问题是该函数将在单击选项卡中的 x 图标时被调用。现在我收到一条弹出消息“你确定要离开吗？”和两个按钮“取消”和“离开”。我希望仅在单击离开按钮时调用该函数。使用您提供的解决方案，即使在弹出窗口出现之前，该功能也会被触发。
好的，请添加其余代码。解决方案将是可观察的或订阅的，当在您的方法中构建弹出组件时发出“离开”，它将调用 myFunction()