Angular router のページ遷移のイベント

● Angular router のページ遷移のイベント

https://angular.io/api/router/Event

NavigationStart,
RouteConfigLoadStart,
RouteConfigLoadEnd,
RoutesRecognized,
GuardsCheckStart,
ChildActivationStart,
ActivationStart,
GuardsCheckEnd,
ResolveStart,
ResolveEnd,
ActivationEnd
ChildActivationEnd
NavigationEnd,
NavigationCancel,
NavigationError
Scroll

解説

種別 発火タイミング
NavigationStart ナビゲーションが開始された時。
ActivationStart ナビゲーション先のコンポーネントが決まった時(GuardやResolveの前)。
ActivationEnd ナビゲーション先のインスタンスが作られた後)。
NavigationEnd ナビゲーションが終了した時(正常に終了した場合)。
NavigationCancel ナビゲーションが終了した時(ナビゲーション処理の途中でキャンセルされた場合)。
NavigationError ナビゲーションが終了した時(ナビゲーション先が存在しないなど、エラーが発生した場合)。

引用: https://bit.ly/37t3uU2

記述方法 イベント(NavigationStart)で操作を行う例」

  constructor( private _router: Router ) {

    _router.events.subscribe(event => {
      if(event instanceof NavigationStart) {
        // ここにページ遷移ごとに実行するメソッド
      }
    });

  }
No.1788
06/15 14:39

edit