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

我想在用户关闭窗口之前保存更改，但在退出选项卡时它不起作用。我正在使用路由器的canDeactivate方法，它在我用F5刷新页面时起作用，但是当我关闭标签数据时并未保存。这里是我的组件我canDeactivate功能：Angular 2在用户关闭窗口之前调用http

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

来源

2017-08-01 Mattew Eon

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

看到它，link

来源

2017-08-01 09:05:27

该解决方案让他想退出与否，我不想让他取消我的HTTP调用 –

有没有选项关闭之前发送一个异步HTTP调用到服务器，并等待它的用户决定窗户。您只能通知用户他有未保存的更改。 – cyrix

@MattewEon我不太确定如果这是可能的这是一个浏览器的限制，但我搜索所以你可以检查这个[链接]（https://stackoverflow.com/questions/38999842/angular-2-execute-code-when -closing-window）。不太确定这是否有助于解决问题 –

行动的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-22 14:39:40 Logic01

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

回答

相关问题