web-dev-qa-db-ja.com

Angular2にはwindow.onbeforeunloadのようなライフサイクルフックがありますか？

Angular2にはwindow.onbeforeunloadのようなライフサイクルフックがありますか？私は既にグーグルで検索してstackoverflowを検索しましたが、何も見つかりませんでした

angularlifecycle
40
Dieter Köberl
<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

58
Günter Zöchbauer

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つの違いがあります。

  1. @HostListenerへの引数はwindow:beforeunloadではなくwindow:onbeforeunloadである必要があります
  2. ハンドラーはメッセージを返すべきではありませんが、代わりに$event.returnValueに割り当てる必要があります
52
Aviad P.

これは私のために働いた。ページコンポーネントコンストラクターで定義

window.addEventListener("beforeunload", (event) => {
   event.preventDefault();
   event.returnValue = "Unsaved modifications";
   return event;
});

returnValueを定義するのは、アンロードする前にユーザーにプロンプ​​トを表示する場合のみです。

ユーザーがページを操作（クリックなど）した場合にのみ機能します。

0
Nicolas

iOS に関する重要な注意

beforeunloadイベントは想定されていません-おそらく長年にわたる「悪用」のレベルが高いためです。

代わりに、 Apple で推奨されているように pagehide を使用できます。

これはPage visibility AP​​Iの一部です。

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

したがって、デスクトップクロムでpagehideを起動することはできません。また、iOS Safariでbeforeunloadを起動することもできません。したがって、両方が必要です。 。

@HostListener('window:beforeunload')
@HostListener('window:pagehide')
0
Simon_Weaver