问题描述： 在Angular 11中，使用@HostListener监听"window:beforeunload"事件时，会触发两次。

解决方法： 问题的原因是Angular会自动在组件中注册window:beforeunload事件的监听器，导致我们手动添加的@HostListener监听器被调用两次。为了解决这个问题，我们需要取消自动注册的监听器。

以下是解决方法的代码示例：

1. 在组件中导入HostListener和Inject装饰器：

import { Component, HostListener, Inject } from '@angular/core';

2. 在组件类中添加@HostListener装饰器，并取消自动注册的监听器：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  @HostListener('window:beforeunload', ['$event'])
  beforeUnloadHandler(event: Event) {
    // 在这里处理beforeunload事件
    // 注意：这个监听器只会被调用一次
  }

  constructor(@Inject(Window) private window: Window) {
    // 取消自动注册的监听器
    this.window.onbeforeunload = null;
  }
}

通过以上步骤，我们手动添加的@HostListener监听器将只会被调用一次，解决了"window:beforeunload"事件触发两次的问题。