Question

我有Clints模式组件，它将数据发布到后端并返回新的客户端

submitForm() {

const body = this.clients;

return this.http.post('api/clients', body).subscribe(data => {

});

}

我有另一个名为ClientsCompnent的组件，其中包含所有客户端详细信息

ngOnInit() {

if (window.screen.width === 425) { // 425px portrait
  this.gbSearch = true;
}

this.http.get('/api/clients').subscribe(data => {
  this.clients = data;
});
}

那么我如何使用客户模式组件中的post方法返回的数据更新clientsComponent中的clients变量

Answer 1

如果我理解你，你需要将一个事件从客户模式传递给客户端组件。

好吧，我认为解决问题的方法不止一种：

如果模态组件是clients组件的子组件，那么您应该使用@output，如下所示：

在模态组件中：

 private @Output() updateClients = new EventEmitter();
 submitForm() {

   const body = this.clients;

   return this.http.post('api/clients', body).subscribe(data => {
      this.updateClients.emit(data);
   });
 }

在客户端组件html中：

<clients-modal (updateClients)="onUpdateClients($event)"></clients-modal>

客户组件ts：

private getClients(){
  this.http.get('/api/clients').subscribe(data => {
     this.clients = data;
  });
}

private onUpdateClients(data:any){
    this.getClients();
}

如果没有父子关系，您应该使用sharedService，请阅读以下链接：

http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

Answer 2

将get请求包装在函数中并在onInit和submit函数内部调用

submitForm() {

    const body = this.clients;

    return this.http.post('api/clients', body).subscribe(data => {
        // if success call this 
        this.getClient();
    });
}


ngOnInit() {

    if (window.screen.width === 425) { // 425px portrait
        this.gbSearch = true;
    }
    this.getClient();

}

getClient() {
    this.http.get('/api/clients').subscribe(data => {
        this.clients = data;
    });
}

如何在ngx-modal发布请求后更新组件中的值

2 个答案: