时间戳

首页 > 解决方案 > 如何在 typeScript 中将 $event returnValue 属性设置为 null

javascript - 如何在 typeScript 中将 $event returnValue 属性设置为 null

问题描述

我正在使用 window.beforeunload 事件来捕获数据更改并警告用户是否需要保存数据。根据 Mozilla 在线文档，如果我将事件返回值设置为 null，我将不会收到用户提示，并且事件将被静默处理。

“当此事件返回（或将 returnValue 属性设置为）null 或 undefined 以外的值时，将提示用户确认页面卸载。”

但是，我尝试将返回值设置为 null 和 undefined，它被视为字符串表示而不是实际值。下面的代码显示了我的事件处理程序。

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

  e.returnValue = undefined;
  if(e.returnValue == "undefined"){
    console.log("Treated like string");
  }
  if(e.returnValue == undefined){
    console.log("treated like null value");
  }

}

第一个 if 条件在所有情况下都会触发，无论我尝试 undefined 还是 null。我已经验证了第二个 if 语句不正确。

如果我创建一个新变量并为其赋值，我不会得到相同的行为。看起来这是对事件的 returnValue 属性的某种约束。这个问题有没有简单的解决方案。

标签： javascriptangulartypescript

解决方案

来自 MDN 网络文档：

如果将字符串分配给 returnValue 事件属性，则会出现一个对话框，要求用户确认离开页面（参见下面的示例）。一些浏览器在对话框中显示返回的字符串，但其他浏览器显示自己的消息。如果未提供任何值，则以静默方式处理事件。

请查看MDN 网络文档beforeunload以获取有关事件的更多详细信息。

  public get hasUnsavedData(): boolean {
    // some logic
    return false;
  }

  @HostListener('window:beforeunload',['$event'])
  onUnload(e){
    if (this.hasUnsavedData) {
      e.returnValue = 'You have unsaved changes...';
    }
    return;
  }

推荐阅读