你只是打电话getAllClients()
在此期间OnInit
的生命周期钩子ClientsComponent
。这意味着它将only在组件初始化时加载客户端(这就是为什么当您导航离开并再次返回时,您会看到新客户端,因为组件重新初始化并且OnInit
生命周期钩子再次被触发)。
为了解决这个问题,您有两个选择(如果您使用状态管理(例如 ngRx),则有两个以上的选择)。
1)当您添加新客户端并关闭对话框后,立即调用getAllClients()
再次,通过订阅afterClosed
的事件MatDialog
this.addClientDialogRef.afterClosed().subscribe(() => { this.getAllClients(); } );
or
2) 通过提供新的客户端对象afterClosed
来自对话框本身的事件,并将新对象推送给您clients
大批。唯一需要注意的是,您需要从 HTTP 请求中返回新的客户端对象saveClient
添加客户端组件
saveClient(formdata: any) {
let theForm = this.clientForm.value;
this.clientService.addClient(theForm).subscribe(data => {
if (data.success === false) {
this.toastr.error(data.message);
} else {
this.toastr.success(data.message);
this.ngOnInit();
this.dialogRef.close(data.client); // <--- Assuming the new object comes under the 'client' key of your response.
}
this.clientForm.reset();
});
}
客户端组件
addClientDialogRef.afterClosed().subscribe((client: Client) => {
this.clients.push(client);
}
The afterClosed
事件记录(简要)在这里:https://material.angular.io/components/dialog/overview
MatDialogRef 提供打开的对话框的句柄。有可能
用于关闭对话框并在对话框打开时接收通知
已经被关了。
dialogRef.afterClosed().subscribe(result => { console.log(`Dialog
result: ${result}`); // Pizza! });
dialogRef.close('Pizza!');