用户决定使用@HostListener('window:beforeunload') 离开页面后如何执行方法

Question

我使用@HostListener('window:beforeunload') 来检测用户是否离开页面。然后打开一个对话框。如果她离开，我希望触发一个事件（或调用一个方法）。如果用户不离开，我不希望触发此事件。

如果我这样做：

  @HostListener('window:beforeunload')
  private someFunction() {
    WHATEVER
  }

someFunction 总是被调用。在调用这个函数之前，我想知道用户的回答。

如果我阅读 this 或 this 似乎这些解决方案也适用于我的情况，但我看不出它们如何处理用户的选择（离开或留下）以了解该功能是否必须调用与否。

会不会和我在@HostListener('window:beforeunload', ['$event'])中没有使用的$event有关？

Answer 1

你可以像这样实现 canDeactivate 守卫 您可以像这样添加确认以检测用户选择确定或取消

canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> 
{
  let confirmObject = confirm("You want to leave ?");
  if (confirmObject  == true) {
    //call some thing then return true;
    return true;
  } 
  else {
    return false;
  }
}

更新也许你可以尝试使用相同的canDeactivate代码

@HostListener('window:beforeunload')
  private someFunction() {
    let confirmObject = confirm("You want to leave ?");
    if (confirmObject  == true) {
      //call some thing then return true;
      return true;
    } 
    else {
      return false;
    }
  }