1. 程式人生 > >Angular4 監聽路由URL的變化

Angular4 監聽路由URL的變化

Angular 4檢測路由變化,可以使用router.events來監聽:

支援的事件型別:

  • NavigationStart:導航開始
  • NavigationEnd:導航結束
  • NavigationCancel:取消導航
  • NavigationError:導航出錯
  • RoutesRecoginzed:路由已認證

在判斷事件型別需要匯入對應的事件型別,如:

import { Router, NavigationStart } from '@angular/router';

監聽單一事件

this.router.events
  .filter((event) => event instanceof NavigationEnd)
  .subscribe((event:NavigationEnd)
 =>
 {     //do something });

監聽多個事件

constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
      //
    } else if(event instanceof NavigationEnd) {
      //
    } else if(event instanceof NavigationCancel) {
      //
    } else if(event instanceof
 NavigationError) {       //     } else if(event instanceof RoutesRecognized) {       //     }   }); }