在Angular 15中,我为bepreunload事件添加了一个事件侦听器,如果用户当前正在播放音频文件,我会显示通常的对话框.

prevent dialog

我找不到一种方法来捕获用户是否单击了Cancel.如果音频正在播放,如果他们取消了,我希望它继续播放.

这样做的原因是我需要知道用户是否听到了整个音频剪辑.

我的代码是在页面init上运行的函数handleUnexpectedPageClose

handleUnexpectedPageClose(): void {
    const pageCloseSub = fromEvent(window, 'beforeunload').subscribe((event: BeforeUnloadEvent) => {

      event.preventDefault();
      
      // Doing this now as we dont know if the user cancels the close
      this.endAudio();

      return (event.returnValue = '');
    });
    this.masterSubscription.add(pageCloseSub);
  }

我在页面上使用master Subcription对销毁进行清理.

推荐答案

您可以使用onunload Event而不是beforeunload,因为这将确保卸载事件实际上被触发,而不用担心Cancel按钮.

Angular相关问答推荐

PrimeNG侧栏清除primeNG消息.为什么?

如何在init为FALSE时以Angular 初始化主拇指擦除器-Swiper 11.0.6Angular 17 SSR

如何在构造函数中测试MatDialog.Open

以17角表示的自定义元素

将sass与@Use语句一起使用时出现Angular 新的VITE构建器编译错误

NGX- colored颜色 Select 器安装出错

AOS-如何在向上滚动时不再次隐藏元素

使用jsPDF生成带有图像的PDF时出现灰色条纹

nx serve正在忽略@angular/localize/init的导入"

为什么动画只触发一次?

ION标签-从子对象中加载页,保留父对象的S内容

Angular 13 Sass 模块无法在编译中正确导入文件

ng 生成组件不会创建 ngOnInit 和构造函数

如何在 form.value 中禁用复选框

Angular SPA 和 .Net 6 API 之间未连接 Application Insights Map

绑定 Angular material Select 列表

react表单上的自定义验证器用于密码并确认密码匹配将未定义的参数导入 Angular 4

Angular单元测试输入值

找不到@angular/common/http模块

如何使用 @ngrx/store 获取 State 对象的当前值?