## 一、路由事件 >[info] 在每次导航中，Router都会通过Router.events属性发布一些导航事件。这些事件的范围涵盖了从开始导航到结束导航之间的很多时间点。 > | 路由器事件 | 说明 | | --- | --- | | NavigationStart | 本事件会在路由开始时触发 | | RouteConfigLoadStart | 本事件会在Router惰性加载某个路由配置之前触发。 | | RouteConfigLoadEnd |本事件会在惰性加载了某个路由后触发。 | | RoutesRecognized | 本事件会在路由器解析完 URL，并识别出了相应的路由时触发 | | GuardsCheckStart | 本事件会在路由器开始 Guard 阶段之前触发。 | |ChildActivationStart |本事件会在路由器开始激活路由的子路由时触发。 | | ActivationStart | 本事件会在路由器开始激活某个路由时触发。 | | GuardsCheckEnd |本事件会在路由器成功完成了 Guard 阶段时触发。| | ResolveStart |本事件会在 Router 开始解析（Resolve）阶段时触发。| | ResolveEnd |本事件会在路由器成功完成了路由的解析（Resolve）阶段时触发。 | | ChildActivationEnd |本事件会在路由器激活了路由的子路由时触发。 | | ActivationEnd|本事件会在路由器激活了某个路由时触发。 | | NavigationEnd | 本事件会在导航成功结束之后触发。 | | NavigationCancel |本事件会在导航被取消之后触发。 这可能是因为在导航期间某个路由守卫返回了 false。 | | NavigationError | 这个事件会在导航由于意料之外的错误而失败时触发。 | | Scroll | 本事件代表一个滚动事件。 | ## 二、监听路由事件 ``` import {Router,NavigationStart} from "@angular/router"; import { filter } from 'rxjs/operators'; //引入Router模块，引入NavigationStart路由开始事件 //引入filter 模块 constructor(router:Router) { } //监听路由开始事件 ngOnInit(){ //监听路由事件 this.router.events.pipe( filter(e => e instanceof NavigationStart) ).subscribe(e =>{ console.log('路由开始了') }) } ```