web-dev-qa-db-ja.com

angular2 @HostListenerが使用されているときにonbeforeunload確認ダイアログが表示されない

@HostListenerフックを使用しますが、確認ダイアログ（このページから移動しますか？...またはこのページを再読み込みしますか？）が表示されません。

コードは機能しますが、確認ダイアログは表示されません。

ここに私が持っているもの：

@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
    console.log("do I see this?") // <---- this logs to the console.

    return "something else";
}

しかし、私はこれを見ません：

enter image description here

angularangular2-hostbinding
7
raneshu

文字列"something else"ではなくfalseを返すと、問題が修正され、確認ダイアログが表示されます。

angular bindingsが戻り値を変更する可能性は十分にあります

10
raneshu

Angularでこれを処理する別の方法をまだ探している人のために。これを試すことができます：

<router-outlet (window:beforeunload)="doBeforeUnload()" (window:unload)="doUnload()"></router-outlet>

ここでは、イベントルーターアウトレットにイベントを追加しました。これは、イベントがapp.component.htmlで唯一のものであるためです。コンテナーまたはラッパーに追加できます。また、1つのbeforeunloadがfalseを返し、unloadが実際の終了イベントを処理する場合にのみユーザーにアラートを表示するため、両方のイベントを追加しました。ユーザーが続行したり、実際に不要なクリックを閉じたり処理したりすることを決定したときに何をすべきかを知りたい場合があるため、これは重要です。実際の関数は次のようになります。

doBeforeUnload() {
    // Alert the user window is closing 
    return false;
}

doUnload() {
    // Clear session or do something
    this.auth.getLogout();
}

PD：私はこれをAngular 6.でテストしました。

5
ART-Prime

falseを返す代わりに、$event.returnValue = "your text"を返す必要があります

最新のブラウザでは、入力したテキストは表示されません。

@HostListener('window:beforeunload', ['$event']) 
yourfunction($event) {
    return $event.returnValue='Your changes will not be saved';
}
3
nitin hawaldar

これを返す必要があります

return $event.returnValue = "something";

ただし、最新のブラウザでは、設定したメッセージは表示されません。ブラウザは単にブラウザのデフォルトを表示します

1
Huangism