LoginSignup
1

More than 5 years have passed since last update.

Angular Component内でのリスナー設定

Last updated at Posted at 2017-08-19

今回やりたかったことは、編集中のページで誤ってcmd+rやcmd+wでページ内容を無効にしてしまうような動作をしてしまった時にページを離れてもよいか確認のダイアログを出すことです

参考

対応

サンプルコード
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;
  }
}

これで確認のダイアログが出るようになりました、以上

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1