angular路由事件
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
angular路由事件的更多相关文章
- 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性
[源码下载] 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性 作者:w ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- Angular路由参数传递
一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...
- Angular 路由⑦要素
cnzt http://www.cnblogs.com/zt-blog/p/7919185.html http://www.cnblogs.com/zt-blog/p/7919185.ht ...
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- Angular路由使用
一. 路由:根据不同URL地址,动态让根组件挂载其他组件来实现单页面应用,相对地址 1. 项目一开始创建就会询问是否添加路由(Angular routing) 2. 有无路由区别{ 1. 多了一个ro ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- 探索Dynamics 365 用户能够登录使用的最小权限需求
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- Cesium 动态绘制点线面(附源码下载)
我写的这个点线面绘制融入了增删改的功能.其中可以通过手动点击地图进行动态绘制线面,也支持通过给定坐标数组来进行线面的增加.绘制好的线面,可以点击进行修改:以上介绍了我的大概的要给操作,下面以面的构建来 ...
- HDFS存入文件的整个流程
本文结合HDFS的副本和分块从宏观上描述HDFS存入文件的整个流程.HDFS体系中包含Client.NameNode.DataNode.SeconderyNameode四个角色,其中Client是客户 ...
- MySQL数据库:数据完整性及约束的应用
数据完整性 1.域完整性:---------匹配完整性:非空.缺省 字段/列 2.实体完整性:-------匹配完整性:主键.唯一键 记录/行 3.引用完整性:-------匹配完整性:外键 表与表之 ...
- Filter拦截器和Listen监听器
Filte过滤器概述 1 过滤器是一个驻留在服务器端的Web组件,可以截取用户端和资源之间的请求响应信息,并对信息进行过滤 过滤的工作流程. 过滤器作用描述 1 ,在HttpServletReq ...
- react后台项目开发(一)
1. 项目开发准备 描述项目 技术选型 api 接口(4部分:3请求{url,请求方式,请求参数格式}, 1响应数据格式)/ 接口文档/ 测试接口 2. 启动项目开发 使用react脚手架创建项目 开 ...
- jvaa之初始化块
1.初始化块的作用:对java对象进行初始化: 2.程序的执行顺序:声明成员变量的默认值-->显示初始化,多个初始化块依次被执行(同级别下按先后顺序执行)-->构造器在对成员进行赋值操作. ...
- Centos7下Redis设置开机自启动服务
有个同事说重启了服务器没有自启动redis,我看了一下,是以前手动编译安装的模式,没有配置开机启动的服务 这边做个笔记记录一下redis如何设置编译安装模式的开机自启动. 第一种方法: 1.编写red ...
- Python 爬虫从入门到进阶之路(一)
通用爬虫和聚焦爬虫 根据使用场景,网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...
- InfluxDB从原理到实战 - 一篇文章搞懂InfluxDB时区
0x00 简介 InfluxDB默认以UTC时间存储并返回时间戳,当接收到一个时序数据记录时,InfluxDB将时间戳从本地时区时间转换为UTC时间并存储,查询时,InfluxDB返回的时间戳对 ...