将数据从模态传递到组件答案

【问题标题】：Passing data from modal to component将数据从模态传递到组件
【发布时间】：2021-11-11 16:33:23
【问题描述】：

我有一个带有分页的用户列表。我正在使用 ngbModal 弹出窗口。在关闭模式下，如何将页面数据从编辑用户模式发送到用户组件？

对话服务

    openDialog(props: any, component:any): Promise<any> {
    debugger
    console.log(props)
    var modelRef = this.ngbModel.open(component, { size: 'md  ', backdrop: 'static' });
    modelRef.componentInstance.props = props;
    return modelRef.result;
  }

用户组件.ts

 opendialog(data: any) {
    this.dialogService
      .openDialog(
        {
          title: 'Edit User',
          page:`page=${this.page}&size=${this.pageSize}`
          type: 'edit',
        },
        EditComponent
      )
      .then((res: any) => {
        console.log(res);
      });
  }

编辑 modal.ts

  setDialogProps(dialogdata: any) {
        this.pages= dialogdata.page; 
      }
      editUser(){
        this.userService.edit(this.form.value,id).subscribe((res:any)=>{
this.ngbActivemodal.close(this.pages)
})
}

【问题讨论】：

标签： angular typescript angular11

【解决方案1】：

MatDialogRef 具有 afterClosed observable，您可以使用它来获取数据。

https://material.angular.io/components/dialog/api

Here 是来自官方材料文档的示例。

【讨论】：