web-dev-qa-db-ja.com

@HostListener（ 'window：onbeforeunload'）を使用してメソッドを呼び出すにはどうすればよいですか？

コンポーネントがアンロードされる前に自分で作成したpostメソッドを呼び出そうとしていますが、機能しません。

@HostListenerにブレークポイントを設定しますが、別のコンポーネントを開いてもブレークしません。

Chrome=を使用してデバッグし、別のコンポーネントを開いたときにブレークするアンロードおよびアンロード前のイベントリスナーブレークポイントをオンにしました。

enter image description here

コードに何かが欠けていますか？

import { Component, OnInit, HostListener } from '@angular/core';

Component({
    templateUrl: 'new-component.html'    
})

export class NewComponent implements OnInit {
    @HostListener('window:beforeunload') onBeforeUnload() {
            PostCall();
    }
}
angulardebuggingonbeforeunloadangular-components
5
Friso

window:beforeunloadは、実際にページをアンロードする直前にトリガーされるブラウザーイベントです。

別のコンポーネントに移動するとき、実際にページをアンロードしているわけではありません。

あなたがする必要があるのは、コンポーネントが破壊されているときに呼び出されるngOnDestroyを使用することです。次のインターフェイスを実装します。

https://angular.io/api/core/OnDestroy

例：

export class NewComponent implements OnDestroy{
    ngOnDestroy() {
            PostCall();
    }
}
7
Grégory Elhaimer

このようにしてみてください：

@HostListener('window:unload', ['$event'])
unloadHandler(event) {
    this.PostCall();
}

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
    return false;
}

PostCall() {
    console.log('PostCall');
}
14
Chandru

単にwindow:beforeunloadイベントをHostListenerで使用すると、リスナーはコンポーネントとともに破棄されます。

Falseを返すとアラートが発生します:)

@HostListener('window:beforeunload')
  onBeforeUnload() {
    return false;
}
0
Patrik Kelemen