javascript - 如何在用户决定离开带有 @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;
    }
  }