警告用户 Angular 10 中未保存的更改

Question

我有角反应形式的角应用。我想在基于某些条件关闭浏览器选项卡/窗口时警告用户。

我该如何实现？

我尝试了以下操作，但无论我返回什么或使用什么条件，它总是显示警告消息。 我在 component.ts 文件中有以下内容：

@HostListener('window:unload', ['$event']) handleClose($event: Event) {
  $event.returnValue = false;
  if (!this.myForm.pristine) {
    $event.preventDefault();
  return false;
  }
  else return true;

}

以及 component.html 文件中的以下内容

<div (window:beforeunload)="handleClose($event)"></div>

我想要做的是检查显示/不显示弹出警告的条件。 非常感激。

Answer 1

尝试这个

@HostListener('window:beforeunload', ['$event'])
handleClose($event): void {
  if (!this.myForm.pristine) { // prevent unload event action.
    $event.returnValue = true;
  }
}