Javascript 如何捕获anctions窗口：在卸载Angular 8之前

我在Angular应用程序中卸载前的窗口事件有问题。 我想检查用户是否导航到另一个页面，如果是，我想清理会话存储。我用

   onBeforeUnload(event: BeforeUnloadEvent) {
       event.returnValue = '';
   }

---

Beforeunload事件也可作为页面刷新。如何在确认对话框后检查用户是否离开应用程序并清除sesion存储

您可以在组件类的构造函数中尝试以下代码

选项1

window.addEventListener("beforeunload", function (e) {
   exampleService.logout();
});

选项2

 @HostListener('window:beforeunload', ['$event'])
     beforeUnloadHandler(event: any) {
     event.preventDefault();
     // any other code / dialog logic
 }

要区分这两种情况，您应该查看此stackoverflow问题或相关问题，这里有一个：

---

希望，这会有所帮助。

以下代码将使浏览器询问用户是否希望丢失未保存的更改

另外，我正在检查表单是否脏

如果表单不脏，浏览器就不会打扰用户并关闭它

import { Component, ViewChild, HostListener } from '@angular/core';
import { NgForm } from '@angular/forms';
import { DetailedUser } from 'src/app/models/detailed-user';

@Component({
  selector: 'app-member-edit',
  templateUrl: './member-edit.component.html',
  styleUrls: ['./member-edit.component.css']
})
export class MemberEditComponent {
  user: DetailedUser = new DetailedUser();
  @ViewChild('userForm') userForm: NgForm;
  @HostListener('window:beforeunload', ['$event'])
  WindowBeforeUnoad($event: any) {

    if (this.userForm.dirty) {
      $event.returnValue = 'Your data will be lost!';
    }
  }
  saveChanges(){
    ....
    this.userForm.reset(this.user);
  }
}

下面是html部分

     <form (ngSubmit)="saveChanges()" #userForm="ngForm">
        <div class="form-group">
          <label for="introduction">Introduction</label>
          <textarea
            name="introduction"
            class="form-control"
            [(ngModel)]="user.introduction"
            rows="6"></textarea>
        </div>
        <div class="form-group">
          <label for="lookingFor">Looking For</label>
          <textarea
            name="lookingFor"
            class="form-control"
            [(ngModel)]="user.lookingFor"
            rows="6"></textarea>
        </div>
      </form>

介绍
寻找

会话存储意味着如果他离开您的应用程序，它将自动清除意味着关闭选项卡或重定向到另一个网站etcIf我使用后退导航浏览器按钮，我有上一个会话：（这都是我的问题，但我不想在刷新应用程序并且仅当它转到另一个页面时才结束用户会话。如何区分操作您知道为什么performance.navigation.type返回类型重新加载如果我导航到另一个页面：（@Cylo检查：我打开了空白链接。如果用户在url栏中写入url或使用选项卡，我需要检查。感谢帮助我无法解决问题。performance.navigation.type返回类型reload all time:（您的链接无法解决我的问题。