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= ...
随机推荐
- ProjectServer2010升级到ProjectServer2016,Sharepoint2010升级到Sharepoint2016第一章
之后还原 Project Server 2010 数据库和包含 Project Web App 网站数据的 SharePoint 内容数据库,您可以运行数据和 Project Web App 网站集升 ...
- js中关于带数字类型参数传参丢失首位数字0问题
最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...
- Linux第二章-Linux常用命令
一.Linux常用快捷键 快捷键 作用 Tab 补全文件名或者路径 Ctrl + L 清除屏幕,然后,在最上面重新显示目前光标所在的这一行的内容. Ctrl + C 终止当前进程 Ctrl + D 注 ...
- JMeter系列教程
认识JMeter工具 JMeter常用元件功能介绍 JMeter线程组 JMeter脚本三种录制方法 Jmeter组件介绍及其作用域和执行顺序 JMeter参数化 JMeter集合点 JMeter关联 ...
- 关于ssh的几个功能
这个有许多介绍的. 通过ssh可以实现远程shell命令行登录,x window登录,端口转发,scp文件复制,本地与远程命令间的管道连接,sftp文件传输与管理,包括同步,以及rsync文件同步,还 ...
- canvas应用
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- PDF软件
推荐的PDF阅读软件:文电通
- TYUT程序设计入门第四讲练习题题解--数论入门
程序设计入门第四讲练习题题解--数论入门 对于新知识点的学习,需要不断地刷题训练,才能有所收获,才能更好地消化知识点. 题组链接: 程序设计入门第四讲练习题--数论 by vjudge 题解: A. ...
- ubuntu18.04 安装 WPS 2019
ubuntu自带的文字处理软件对来自windows下office或在WPS创建的ppt有点不兼容,看到WPS有linux版本的,便果断安装试一试. 一.卸载原生liboffice sudo apt-g ...
- Hbase如何批量删除指定数据
有时我们需要批量删除一些hbase中符合某些条件的数据,本文提供一种简单的shell命令的方式批量删除hbase里的数据.思路就是,建立hive与hbase的关联表,通过hive sql查询出符合条件 ...