使用 beforeunload 在窗口关闭时使用 Angular 13 发送信标的正确方法

Question

当用户关闭他们在我的网站上查看的浏览器窗口时，我尝试发送信标。我正在使用 Angular 13 并使用窗口和导航器 javascript api 来完成此操作。

首先，我知道在我的初始化帖子中疯狂回调。它会得到修复，只是我现在不关心。

ngOnInit(): void {
    window.scrollTo(0,0);
    this.route.params
      .subscribe(
        (params: Params)=>{
          this.creatorslug = params['creatorslug'];
          this.userobject = this.authservice.getUser$()
            .subscribe(
              (object : any)=>{
                this.userobject = object;
                this.http.get(environment.add_user_to_content_creator_shochat_stream + this.creatorslug)
                  .subscribe(
                    (req: any)=> {
                      this.shochatobject = req;
                      window.addEventListener('beforeunload', ev => {
                        const payload = {
                          shochatid: this.shochatobject['shochatid']
                        };
                        if(!this.properleave){
                          //@ts-ignore
                          navigator.sendBeacon(environment.receive_beacon_user_leave_shochat, payload)
                        }

                        });
                      this.loaded = true;
                      this.syncsubscription = this.tss.receiveSyncClient()
                        .subscribe(
                          (req: any) => {
                            if(req != null){
                              this.syncClient = req;
                              this.syncClient.document(this.tss.setdocumentname(this.shochatobject['contentcreatordisplayname'])).then((doc) => {
                                if(doc.data.killshochat){
                                  this.leaveshochat();
                                }
                              });

                              this.syncClient.document(this.tss.setdocumentname(this.shochatobject['contentcreatordisplayname'])).then((doc)=>{
                                doc.on('updated', (event)=>{
                                  if(event.data.killshochat){
                                    this.leaveshochat();
                                  }
                                });
                              });
                            }

                          });
                    });
              });
        });
  }

请注意，我共享组件的 init 函数，我定义了 beforeunload 侦听器，

window.addEventListener('beforeunload', ev => {
                            const payload = {
                              shochatid: this.shochatobject['shochatid']
                            };
                            if(!this.properleave){
                              //@ts-ignore
                              navigator.sendBeacon(environment.receive_beacon_user_leave_shochat, payload)

正确的离开布尔值与用户正确离开页面时调用的标志有关。

leaveshochat(){
    this.properleave = true;
    // @ts-ignore
    const url = environment.user_leave_shochat + this.shochatobject.shochatid;
    this.http.delete(url)
      .subscribe(
        (req: any)=>{
          // @ts-ignore
          this.router.navigate(['user-services', 'user-shochat-end', this.shochatobject.shochatid]);
        });
  }

但是，当我测试关闭浏览器窗口而不单击使用信标不发送的 leaveshochat() 函数的按钮时，会发生什么。我想我正在做一些愚蠢的事情。

更新我读了这篇文章，然后尝试了这个，但行动仍然没有改变

@HostListener('window:beforeunload',['$event'])

  unloadHandler(event: Event){
    const payload = {
      shochatid: this.shochatobject['shochatid']
    };
    if(!this.properleave){
      //@ts-ignore
      navigator.sendBeacon(environment.receive_beacon_user_leave_shochat, payload)
    }
  }

Answer 1

假设这个问题不是来自移动设备？例如，这些事件在以下情况下不会触发：

1. 用户加载页面并与其交互。
2. 当他们完成后，他们会切换到另一个应用程序，而不是关闭选项卡。
3. 随后，他们使用手机的应用程序管理器关闭浏览器应用程序。

我在这里没有看到的另一件事是 this.properleave 是什么？您确定用户离开时它处于正确的状态吗？不管怎样，我尝试测试它，并且我能够在卸载之前发布消息内容。

  ngOnInit() {
    this.subscribeToNativeNavigation();
  }

  private subscribeToNativeNavigation() {
    fromEvent(window, 'beforeunload')
    .subscribe((e) => {
      const message = 'Sending data';
      (e || window.event).returnValue = !message;
      console.log(message)
      navigator.sendBeacon('/log', message);
      return message;
    })
  }

  refreshPage() {
    location.reload();
  }

示例： https://stackblitz.com/编辑/beforeunload-warning-kmbxjl?file=src%2Fapp%2Fapp.component.ts