Question

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

Answer 1

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
                });

Answer 2

@HostListener('window:beforeunload', ['$event'])
handler(event) {
  ...your warning
}

在此处查看link

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

2 个答案: