使用candeactive实现角度材质对话框

Question

在candeactive中实现angular 4材质对话框时遇到的问题

每当我从一个页面导航到另一个页面时，如果表单字段有任何变化， 我需要指出“有未保存的数据。您要关闭吗”。 这应该会出现带有确定和取消按钮的确认窗口。

单击确定后，它应该导航到其他页面，否则它必须在同一页面中。 我已经尝试过使用candeactive，当我使用window.confirm时它可以完美地工作

 return window.confirm('There is unsaved data.Do you want to close?').

但我的要求是使用 Angular 材质对话框实现确认窗口。 https://material.angular.io/components/dialog/overview

问题出在从 afterClosd 检索结果之前。它返回 false。因此，每当我在对话框中单击“确定”或“取消”时，它都不会移动到另一个屏幕。

openDialog(): boolean {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '500px'

    });

    dialogRef.afterClosed().subscribe(result => {           
      if (result){
         return true;
      }else{
        return false;
      } 
    });
   return false;

  }

Answer 1

我假设您没有在文档中看到这部分？

<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="true">Leave</button>

另外，你应该删除你最后的return false 声明：

dialogRef.afterClosed().subscribe(result => {           
  if (result){
     return true;
  }else{
    return false;
  } 
});
// return false;

模式是异步，正如您在subscribe 中看到的那样：这意味着您在返回某些内容之前正在等待用户交互。

在您的情况下，您在用户操作之前返回 false 。