angular监听路由变化的方法:
Angular路由配置非常简单,但是路由通过Observables使用起来也非常强大。我们可以在根组件中全局监听路由的变化:
ngOnInit() { this.router.events .subscribe((event) => { // example: NavigationStart, RoutesRecognized, NavigationEnd console.log(event); }); }
router.events()
router.events()是一个observable对象,我们可以通过订阅它来获取路由变化的相关信息
evnets提供了以上诸多类型的事件,方便我们根据事件的类型进行过滤
constructor(private ref: ChangeDetectorRef, private router: Router) {}ngOnInit() { this.routerEventsListener = this.router.events .filter(event => event instanceof NavigationEnd) //根据事件的类型进行过滤 .subscribe((event) => { // your operation this.ref.detectChanges(); //我的操作 });}
大家一定要注意保护自己的操作,因为router.events是全局的,所以在组件内使用时,最好在ngOndestory()中unsubscribe
ngOnDestroy() { this.routerEventsListener.unsubscribe(); }
以上就是angular2如何监听路由变化?的详细内容,更多请关注0133技术站其它相关文章!