2017-08-01 31 views
1

我想在用戶關閉窗口之前保存更改,但在退出選項卡時它不起作用。 我正在使用路由器的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; 
} 

回答

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

看到它,link

+0

該解決方案讓他想退出與否,我不想讓他取消我的HTTP調用 –

+0

有沒有選項關閉之前發送一個異步HTTP調用到服務器,並等待它的用戶決定窗戶。您只能通知用戶他有未保存的更改。 – cyrix

+0

@MattewEon我不太確定如果這是可能的這是一個瀏覽器的限制,但我搜索所以你可以檢查這個[鏈接](https://stackoverflow.com/questions/38999842/angular-2-execute-code-when -closing-window)。不太確定這是否有助於解決問題 –

0

行動的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 
       }); 
相關問題