关闭ngbModal编辑用户弹窗时如何将分页数据传递到用户组件

你当前的封装逻辑本身是可行的，ng-bootstrap的NgbModal默认支持通过close()方法传递返回值，返回值会作为modelRef.result这个Promise的成功回调参数，只要补全代码里的遗漏问题就能实现分页参数传递。

代码修正要点 #

• 用户组件调用弹窗时的语法错误修正，补全参数之间的逗号
• 编辑模态框正确接收外部传入的props参数
• 用户组件在弹窗关闭的回调中拿到返回的分页参数，更新自身分页状态后刷新列表即可

修正后Dialog service代码 #

// 注意变量名不要写错，是ngbModal不是ngbModel
openDialog(props: any, component:any): Promise<any> {
  console.log(props)
  const modelRef = this.ngbModal.open(component, { size: 'md', backdrop: 'static' });
  modelRef.componentInstance.props = props;
  return modelRef.result;
}

修正后用户组件代码 #

opendialog(data: any) {
  this.dialogService
    .openDialog(
      {
        title: 'Edit User',
        // 这里原来少了逗号，现在补上
        page:`page=${this.page}&size=${this.pageSize}`,
        type: 'edit',
      },
      EditComponent
    )
    .then((res: any) => {
      // res就是编辑模态框close时传入的分页参数
      if (res) {
        // 解析分页参数更新当前组件的分页变量
        const pageParams = new URLSearchParams(res);
        this.page = Number(pageParams.get('page'));
        this.pageSize = Number(pageParams.get('size'));
        // 调用你的用户列表查询方法，刷新当前页数据
        this.loadUserList();
      }
    });
}

修正后编辑模态框代码 #

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Input } from '@angular/core';

// 先声明接收外部传入的props
@Input() props: any;
pages: string;

constructor(public ngbActivemodal: NgbActiveModal, private userService: UserService) {}

ngOnInit() {
  // 初始化时拿到传入的分页参数
  this.pages = this.props.page;
}

editUser(id: number){
  this.userService.edit(this.form.value, id).subscribe((res:any) => {
    // 关闭模态框时传入要返回的分页数据，如果你编辑后需要跳转到其他页，直接修改this.pages的值即可
    this.ngbActivemodal.close(this.pages)
  })
}

补充说明 #

如果你不需要修改分页参数，编辑后就停留在当前页，直接传入原分页参数即可；如果编辑后需要回到第一页，直接在close的时候传入page=1&size=你当前的每页条数就行。

内容的提问来源于stack exchange，提问作者Manoj Kumar