3

我想在用户关闭窗口之前保存更改，但是当我退出选项卡时它不起作用。我正在使用路由器的 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(): 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;
}
4

2 回答 2

3

这window:beforeunload是一个同步事件。如果您在事件侦听器中执行异步操作，则事件将在您的异步操作之前完成。这就是为什么您的 http 请求永远不会发出的原因。

不幸的是，我找不到任何强制 Angular 2 的 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
                });
于 2017-08-22T14:39:40.137 回答
0 
@HostListener('window:beforeunload', ['$event'])
handler(event) {
  ...your warning
}

在此处查看实际操作链接

于 2017-08-01T09:05:27.863 回答