Angular（8）NgbModal数据库插入，并且相同的数据将在父页面组件上刷新

Question

在[Ang0（8）中，使用NgbModal。父页面，是从http服务（java和mysql db）获取数据的组件之一，作为列表。并且在提交模态时，它将在mysql db的同一表中插入一条记录。现在，在模态提交和关闭之后，如何使用新数据刷新/更新组件列表数据。

父组件-​​>打开模式组件

“ selectedName”从数据库获取并显示在父组件中。

 openEditProfilePage() {
    const modalRef = this.modalService.open(EditProfileComponent, { size: 'xl', scrollable: true });
    modalRef.componentInstance.selectedName = this.selectedName;

  }

子组件从父组件获取selectedName的值，并以更新形式添加一些字符串并保存。

 onSave(form: FormGroup) {

    if (form.valid) {

      this.nameService.editName(form.value).subscribe(
        res => {
          this.modalService.dismissAll();
        },
        error => {
          this.showError(error);
        }
      );
    }
  }

现在在子组件中，它将在DB.so中更新名称，所以在dismissAll之后，将关闭模式/弹出窗口，同时要在父组件中显示更新的名称。

Answer 1

通过查看文档，您似乎需要使用NgbModalRef（https://ng-bootstrap.github.io/#/components/modal/api#NgbModalRef）提供的结果保证。当模式关闭时，promise将被解决（或被拒绝），因此您将能够在此时加载新列表。例如：在您的父页面中component.ts

constructor(private modalService: NgbModal) {}
open(content) {
    this.modalService.open(content).result.then((result) => {
        //call the method of refreshing your list here
    }, (reason) => {
        //called if the modal was dismissed for some reason
    });
  }

在您的模式HTML中

<div class="modal-footer">
    <!-- modal.close will cause the result promise to get resolved therefore executing the block of code that will refresh the items list -->
    <button type="button"(click)="modal.close('Save click')">Save</button>
  </div>