2016-04-21 58 views

回答

30
<div (window:beforeunload)="doSomething()"></div> 

@Component({ 
    selector: 'xxx', 
    host: {'window:beforeunload':'doSomething'} 
    .. 
)} 

@Component({ 
    selector: 'xxx', 
    .. 
)} 
class MyComponent { 
    @HostListener('window:beforeunload') 
    doSomething() { 
    } 
} 

這是怎麼聽的全球性事件。我不知道這個事件的特殊行爲是否支持返回值用作構造對話框的文本。

,您仍然可以使用

export class AppComponent { 
    constructor() { 
    window.onbeforeunload = function(e) { 
     return 'Dialog text here.'; 
    }; 
    } 
} 

喜歡這裏解釋https://developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/onbeforeunload

+0

怎麼樣的'窗口。 onbeforeunload'方法?它怎麼不起作用? –

+4

不幸的是,所有3個選項都不起作用。 它必須在父組件上嗎?在子組件上,它不會觸發事件。例如:window.onbeforeunload = function(e){ alert('Event triggered!');} –

+1

我更新了我的問題。代碼(最後一個變體)顯示我在Chrome瀏覽器中離開頁面時的對話框。 –

30

岡特Zöchbauer的答案是稍有不當就一點算,這是爲我工作:

@Component({ 
    selector: 'xxx', 
    .. 
)} 
class MyComponent { 
    @HostListener('window:beforeunload', ['$event']) 
    doSomething($event) { 
    if(this.hasChanges) $event.returnValue='Your data will be lost!'; 
    } 
} 

與Günter's有兩個主要區別答案:

  1. @HostListener的參數應該是window:beforeunload而不是window:onbeforeunload
  2. 處理程序不應該返回的消息,而應該將其分配到$event.returnValue代替
+0

此代碼適用於我。不幸的是,當我關閉標籤時,這不會在我的android手機中執行。有什麼建議麼? – brijmcq

+0

https://stackoverflow.com/questions/35779372/window-onbeforeunload-doesnt-trigger-on-android-chrome-alt-solution可能有幫助 –

+0

當'returnValue'不是'null'時,對話框會顯示。而且大多數交叉口現在向用戶顯示一條通用信息。所以你無法改變它。 –

相關問題