在Angular中关闭材料对话框前确认消息？

Question

我该如何使用 beforeClose() 方法，在关闭材料对话框之前显示确认消息？

this.dialogRef.beforeClose().subscribe(result => {
      var cn = confirm('You have begun editing fields for this user. 
                        Do you want to leave without finishing?')
      console.log(cn);

    })

- Ashish Kumar

---

你不能这样做。beforeClosed 流用于挂钩关闭开始，这意味着模态框已经在关闭中。如果你想取消关闭，你将不得不实现自己的方法。也许 canDeactivate 守卫可以帮助你，否则只需阻止用户离开即可。 - user4676340

不要直接执行操作，而是打开一个 Snackbar 来询问确认，如果选择了 Snackbar 操作，则相应地执行操作。 - Abhishek Kumar

在调用.close方法之前，您可以询问用户确认！ - Prashant Pimpale

@Ashish 这是你想要的吗？链接 - Prashant Pimpale

@PrashantPimpale 我在询问用户点击刷新按钮或者在对话框外部点击的情况。 - Ashish Kumar

Answer 1

以下是您需要在以下事项上使用 window.confirm 的方式：

• 如果用户点击了刷新按钮，或者
• 点击对话框外部

根据在评论中分享的参考链接，
我已经实现了一个使用@HostListener的Stackblitz演示。
用于esc和refresh的代码为：

@HostListener('window:keyup.esc') onKeyUp() {
    let cn = confirm('Sure ?')
    if (cn) {
      this.dialogRef.close();
    }
  }

@HostListener("window:beforeunload", ["$event"]) unloadHandler(event: Event) {
      console.log('event:', event);
      event.returnValue = false;
}

在 ConfirmationDialog 组件中，将 backDropClick() 进行处理，如下所示：

ngOnInit() {
  this.dialogRef.disableClose = true;
  this.dialogRef.backdropClick().subscribe(_ => {
    let cn = confirm('Sure ?')
    if (cn) {
      this.dialogRef.close();
    }
  })
}

应用程序代码： https://stackblitz.com/edit/dialog-example-beforeclose?file=app%2Fapp.component.ts

- Abhishek Kumar

---

谢谢伙计，这就是正确的答案。window:beforeunload帮助我在这里实现了我的解决方案。 - Ashish Kumar

我们能否覆盖 window:beforeunload 事件的默认消息？ - Ashish Kumar

@AshishKumar 是的，这就是我的问题所在，我尝试过了，但无法在重新加载确认框上显示我的消息。所以我想让它与确认框保持一致，因为确认框在重新加载时可见。 - Abhishek Kumar

Answer 2

您可以使用 disableClose: true 防止通过点击 outside 或按下 esc 来关闭对话框。

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      scrollStrategy: this.overlay.scrollStrategies.close(),
      disableClose: true //for diabled close dialog
    });

您可以使用以下代码来使用确认对话框：

 onNoClick(): void {
      var cn = confirm('You have begun editing fields for this user. Do you want to leave without finishing?');
       console.log(cn);
       if(cn){

    this.dialogRef.close();
       }
  };
  onOKClick(): void {
      var cn = confirm('You have begun editing fields for this user. Do you want to leave without finishing?');
       console.log(cn);
       if(cn){

    this.dialogRef.close();
       }
  };

HTML 代码：

<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button (click)="onOKClick()" cdkFocusInitial>Ok</button>
</div>

参考链接： link1，link2。

- IftekharDani

---

当您刷新页面时，它将无法工作，我的主要问题是如果mat对话框已经打开，页面会刷新。@Abhishek使用window:beforeunload浏览器事件和@HostListener给出了正确的答案。我也曾经认为beforeunload不能与material对话框一起使用。 链接 - Ashish Kumar