Question

在candeactive

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

每当我在表单字段中有任何更改时从一个页面导航到另一个页面，我需要指出＆＃34;有未保存的数据。你要关闭＆＃34;。这应该会出现确认窗口，其中包含确定和取消按钮。

单击“确定”后，它应该导航到其他页面，否则它必须位于同一页面中。我尝试过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 。

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

1 个答案: