Angular2にはwindow.onbeforeunloadのようなライフサイクルフックがありますか?私は既にグーグルで検索してstackoverflowを検索しましたが、何も見つかりませんでした
<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
GünterZöchbauerの答えは少し間違っています 二 カウント、これは私のために働いたものです:
@Component({
selector: 'xxx',
..
)}
class MyComponent {
@HostListener('window:beforeunload', ['$event'])
doSomething($event) {
if(this.hasChanges) $event.returnValue='Your data will be lost!';
}
}
Günterの答えには、主に2つの違いがあります。
@HostListener
への引数はwindow:beforeunload
ではなくwindow:onbeforeunload
である必要があります$event.returnValue
に割り当てる必要がありますこれは私のために働いた。ページコンポーネントコンストラクターで定義
window.addEventListener("beforeunload", (event) => {
event.preventDefault();
event.returnValue = "Unsaved modifications";
return event;
});
returnValue
を定義するのは、アンロードする前にユーザーにプロンプトを表示する場合のみです。
ユーザーがページを操作(クリックなど)した場合にのみ機能します。
iOS に関する重要な注意
beforeunload
イベントは想定されていません-おそらく長年にわたる「悪用」のレベルが高いためです。
代わりに、 Apple で推奨されているように pagehide を使用できます。
これはPage visibility
APIの一部です。
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
したがって、デスクトップクロムでpagehide
を起動することはできません。また、iOS Safariでbeforeunload
を起動することもできません。したがって、両方が必要です。 。
@HostListener('window:beforeunload')
@HostListener('window:pagehide')