りんごです。 この記事はAngular Advent Calendar 2017の12月15日の記事です。 はじめに よくあるWebの入力フォームのある画面や何かしらのデータを編集するWebアプリの画面など、不意に誤ってブラウザのタブを閉じてしまうと悲しい思いをするケースがあります。 そういった画面を実装するには、次のようにwindowのbeforeunloadイベントを使うことで離脱確認ダイアログを表示するのが一般的です。 しかし、AngularではwindowのイベントだけでなくRouterによって画面遷移を制御します。そのため、beforeunloadイベントだけではページ離脱確認を実装しきれません。 今回はAngularでのページ離脱確認の実装方法を紹介します。 CanDeactivateを使う Angularでページ離脱確認を行うには、beforeunloadイベントを処理するだ