我有一个对象列表。用户可以单击其中一个,然后加载一个子组件来编辑该组件。
我遇到的问题是,当用户返回列表组件时,子组件必须在 ngOnDestroy 方法中进行一些清理 - 这需要调用服务器来对对象进行最终的“修补”。有时此处理可能会有点慢。
当然,发生的情况是用户返回到列表中,并且该 api 调用在数据库事务从ngOnDestroy
完成,因此用户看到陈旧的数据。
ngOnDestroy(){
this.destroy$.next();
this.template.template_items.forEach((item, index) => {
// mark uncompleted items for deletion
if (!item.is_completed) {
this.template.template_items[index]['_destroy'] = true;
};
});
// NOTE
// We don't care about result, this is a 'silent' save to remove empty items,
// but also to ensure the final sorted order is saved to the server
this._templateService.patchTemplate(this.template).subscribe();
this._templateService.selectedTemplate = null;
}
我知道不建议进行同步调用,因为它会阻塞 UI/整个浏览器,这不太好。
我确信有多种方法可以解决这个问题,但真的不知道哪种方法最好(特别是因为 Angular 不支持同步请求,所以我必须回退到标准 ajax 来做到这一点)。
我确实想到的一个想法是 ngOnDestroy 可以将“标记”传递给 API,然后它可以将该对象标记为“正在处理”。当列表组件执行调用时,它可以检查每个对象以查看它是否具有该标记,并为处于该状态的任何对象显示“刷新陈旧数据”按钮(无论如何,99% 的时间都只是单个项目,用户编辑的最新一篇)。与仅将异步调用更改为同步调用相比,这似乎是一种糟糕的解决方法,并且需要大量额外的代码。
其他人一定也遇到过类似的问题,但我似乎找不到任何明确的例子,除了这个同步的 https://stackoverflow.com/questions/38999842/angular-2-execute-code-when-closing-window.
EDIT
请注意,该子组件上已经有一个 CanDeactive 防护。它要求用户确认(即放弃更改)。因此,如果他们点击确认,那么 ngOnDestroy 中的清理代码就会被执行。但请注意,这不是典型的角度形式,用户真正“放弃”更改。本质上,在离开此页面之前,服务器必须对最终数据集进行一些处理。因此,理想情况下,我不希望用户在 ngOnDestroy 完成之前离开 - 如何强制它等待 api 调用完成?
我的 CanDeactive 防护的实现几乎与官方文档 https://angular.io/guide/router#candeactivate-handling-unsaved-changes对于 Hero 应用程序,连接到通用对话服务,提示用户是否希望留在页面上或继续离开。这里是:
canDeactivate(): Observable<boolean> | boolean {
console.log('deactivating');
if (this.template.template_items.filter((obj) => { return !obj.is_completed}).length < 2)
return true;
// Otherwise ask the user with the dialog service and return its
// observable which resolves to true or false when the user decides
return this._dialogService.confirm('You have some empty items. Is it OK if I delete them?');
}
不过,文档并没有明确说明我的情况 - 即使我将清理代码从 ngOnDestroy 移至对话框的“YES”方法处理程序,它仍然必须调用 api,因此 YES 处理程序仍会在 API 之前完成做了,我又遇到了同样的问题。
UPDATE
阅读所有评论后,我猜测解决方案是这样的。将守卫从:
return this._dialogService.confirm('You have some empty items.
Is it OK if I delete them?');
to
return this._dialogService.confirm('You have some empty items.
Is it OK if I delete them?').subscribe(result => {
...if yes then call my api and return true...
...if no return false...
});