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

回答

相關問題