Javascript 从ng引导模式中删除后，使用新数据重新加载组件

我试图理解一些概念，想看看是否有人能帮忙。我有一个ng引导模式，显示从父组件中进行的API调用输入的一些信息。基本上，我在这个模式中显示数据，我能够点击删除路径删除一些记录。这很好，但问题是，当我关闭模式时，我希望父组件刷新，而不是显示刚刚从模式中删除的记录，因此基本上再次运行请求并更新信息，但我不确定如何实现这一点。我相信这通常可以通过事件发射器来实现，但我被卡住了，因为我是从一个模态和ng引导来实现的。任何有助于理解这一点的人都将不胜感激

这是我的密码：

app.html：

<div>
  <ul>
    <li *ngFor="let user of users">{{user.first_name}}</li>
  </ul>
    <button (click)="openFormModal()" class="btn btn-primary btn-sm">view more</button>
</div>

details-modal.html：

  <div class="modal-header">
  <h4 class="modal-title">Modal Title</h4>
  <button type="button" class="close" aria-label="Close"
   (click)="closeModal()">
  </button>
</div>
<div class="modal-body">
  <p *ngFor="let user of users">{{user.first_name}} <span (click)="deleteUser(this.user.id)" style="cursor: pointer">DELETE</span></p>
</div>
<div class="modal-footer">
  <button (click)="closeModal()">
    Close Clicked
  </button>
</div>

显然，从这个，你可以做到这一点

modalRef.result.then(
  () => {
     console.log("Close button clicked");
     // actions
  },
  ()=> {
     console.log("Close icon clicked or backdrop clicked");
     // actions
});

---

Stackblitz:

感谢Stackblitz，它很有意义，帮助我完全理解这一点

@Component({
  selector: 'app-details-modal',
  templateUrl: './details-modal.component.html',
  styleUrls: ['./details-modal.component.css']
})
export class DetailsModalComponent implements OnInit {
  @Input() users;

  constructor(
    public activeModal: NgbActiveModal,
    private api: ApiService
  ) {}

  ngOnInit() {
  }

  fetch() {
    this.api.getUsers().subscribe(data => {
      this.users = data;
    })
  }

  closeModal() {
    this.activeModal.close()
  }

  deleteUser(id) {
    this.api.deleteUser(id).subscribe(data => {
      this.fetch();
    })
  }

}

modalRef.result.then(
  () => {
     console.log("Close button clicked");
     // actions
  },
  ()=> {
     console.log("Close icon clicked or backdrop clicked");
     // actions
});