时间戳

首页 > 解决方案 > 将数据从模态传递到组件

angular - 将数据从模态传递到组件

问题描述

我有一个带有分页的用户列表。我正在使用 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)
})
}

标签： angulartypescriptangular11

解决方案

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

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

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

推荐阅读