0

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

  }
4

1 回答 1

0

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

<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 。

于 2018-01-22T08:49:37.193 回答