今回やりたかったことは、編集中のページで誤ってcmd+rやcmd+wでページ内容を無効にしてしまうような動作をしてしまった時にページを離れてもよいか確認のダイアログを出すことです
参考
- javascript detect browser close tab/close browser
- attribute-directive Respond to user-initiated events
- Is there any lifecycle hook like window.onbeforeunload in Angular2?
対応
サンプルコード
HostListenerをcoreからimportして@HostListenerの引数にリスナ名書いて、その下の行に処理書くだけ
import { Component, OnInit, HostListener } from '@angular/core';
@Component({
// ~~~
})
export class SampleComponent {
// プロパティとかコンストラクタとか
// 追加した処理
@HostListener('window:beforeunload') // リスナの設定
closeConfirmation(e): string { // イベントを受け取った時のメソッド
var confirmationMessage = "!!!";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage;
}
}
これで確認のダイアログが出るようになりました、以上