在 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);

    })

Answer 1

如您所愿window.confirm：

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

根据评论中共享的参考链接，
我实现了一个Stackblitz Demo，它使用@HostListener
Code for 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