angular路由事件
2019-07-31 15:12
921 查看
原文链接:http://www.cnblogs.com/mary-123/p/11276454.html
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) { // } }); }
运用实例参考:https://www.cnblogs.com/mary-123/p/10728614.html
转载于:https://www.cnblogs.com/mary-123/p/11276454.html
相关文章推荐
- Angular 监听路由变化事件
- angular 路由 常用事件
- Angular 监听路由变化事件
- Angular 监听路由变化事件
- Angular 4 路由守卫
- 路由事件[转]
- Angular 2 路由
- angular购物车路由
- 深入理解ANGULARUI路由_UI-ROUTER
- angular学习之路由(一)
- angular 辅助路由
- 解决Angular设置路由时,地址栏出现"!"的问题
- angular中的路由 ng-router vs ui.router
- 笔记:angular在路由跳转时,如何让跳转的页面显示在最顶端?
- angularjs $broadcast $emit $on 事件触发controller间的值传递
- 5 WPF路由事件
- angular 路由传参
- 学习WPF——了解路由事件
- ng-click 事件获取dom元素 angular
- angular 禁止事件冒泡 和 默认行为