用戶決定使用@HostListener（'window：beforeunload'）離開頁面后如何執行方法

Question

我使用@HostListener('window:beforeunload')來檢測用戶是否離開頁面。 然后打開一個對話框。 如果她離開，我希望觸發一個事件（或調用一個方法）。 如果用戶不離開，則不希望觸發此事件。

如果我做：

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

someFunction總是被調用。 我想在調用此函數之前了解用戶的答案。

如果我讀過這 本書 ，這些解決方案似乎也適用於我的情況，但是我看不到它們如何處理用戶的選擇（不管是離開還是留下），以了解是否必須調用該函數。

這可能是它與相關的$event我不使用@HostListener('window:beforeunload', ['$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;
    }
  }