Angular 2在用户关闭窗口之前调用http

我想在用户关闭窗口之前保存更改，但当我退出选项卡时，它不起作用。 我使用的是router的canDeactivate方法，当我用F5刷新页面时，它会工作，但当我关闭选项卡时，数据不会保存。下面是我的组件中的canDeactivate函数：

@HostListener('window:beforeunload')
canDeactivate(): Observable<boolean> | boolean {
    let subject = new Subject<boolean>();
    let observable = subject.asObservable();

    this.service.save(this.data).then(() => {
        subject.next(true);
    });

    return observable.first();
}

@HostListener（'window:beforeunload'）
canDeactivate（）：可观察的|布尔值{
让主语=新主语（）；
让可观察=subject.asObservable（）；
this.service.save（this.data）。然后（（）=>{
subject.next（true）；
});
返回可观察的。first（）；
}

我也试过了：

@HostListener('window:beforeunload')
canDeactivate(): Observable<boolean> | boolean {
    let xmlhttp = new XMLHttpRequest();   // new HttpRequest instance
    xmlhttp.withCredentials = false;
    xmlhttp.open("PUT", "http://localhost:8080/rest/api");
    xmlhttp.setRequestHeader("Content-Type", "application/json");
    xmlhttp.setRequestHeader("Accept", "application/json");
    xmlhttp.send(this.data);

    return false;
}

@HostListener（'window:beforeunload'）
canDeactivate（）：可观察的|布尔值{
让xmlhttp=newxmlhttprequest（）；//新建HttpRequest实例
xmlhttp.withCredentials=false；
open（“PUT”http://localhost:8080/rest/api");
setRequestHeader（“内容类型”、“应用程序/json”）；
setRequestHeader（“接受”、“应用程序/json”）；
xmlhttp.send（this.data）；
返回false；
}

---

请在此处查看它的操作

窗口：beforeunload是一个同步事件。如果在事件侦听器中执行异步操作，则事件将在异步操作之前完成。这就是为什么从未发出http请求

不幸的是，我找不到任何方法来强制Angular2的HTTP库同步执行。我被迫导入JQUERY并使用AJAX

                // the http call must be synchronous.
                // the 'unload' event won't wait for async
                // angular's http doesn't support synchronous requests
                // this is why we use JQUERY + AJAX
                $.ajax({
                    type: 'PUT',
                    async: false,
                    url: this.url
                });

---

这个解决方案让用户决定是否退出，我不希望他取消我的http调用。没有选项向服务器发送异步http调用并在关闭窗口之前等待。您只能通知用户他有未保存的更改。@MattewEon我不确定这是否可能这是浏览器限制，但我继续搜索，以便您检查。不太确定这是否有助于解决问题issue@cyrix不，我不能。我想在用户关闭页面时保存所有答案和在Mcq上花费的时间，以防止在时间上作弊。@RahulSingh感谢你的链接，我已经找到了这篇文章，这可能是我正在做的。唯一的选择是尝试通过xhr进行同步http调用，正如在这篇评论中所说的：嗨，我刚刚在我实际的Angular项目中测试了它，而且后端也从未使用过它。

                // the http call must be synchronous.
                // the 'unload' event won't wait for async
                // angular's http doesn't support synchronous requests
                // this is why we use JQUERY + AJAX
                $.ajax({
                    type: 'PUT',
                    async: false,
                    url: this.url
                });