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= ...
随机推荐
- PHP服务化搭建之nginx动静分离实战
如有什么问题可以加群交流:647617935 什么是动静分离 动静分离:将项目中的CSS,JS,HTML,JPG'.等静态资源和 PHP等动态资源分开处理的一种方式 动静分离优点 不同的文件由不同类型 ...
- git配置:本地仓库提交到远程仓库
前提:1.已安装git 一:创建公钥,一台机子匹配一个公钥 桌面右键选择 Git Bash Here 打开命令行输入:ssh-keygen -t rsa -C "xxx@xxx.com&qu ...
- Html5 小游戏 俄罗斯方块
导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...
- MinU: v2 Vulnhub Walkthrough
主机层面扫描: 22 和 3306 端口 3306 端口默认是MySQL端口,但是这里尝试爆破报错,最后通http访问发现非MySQL协议,而是一个http的服务 http的协议我们进行目录枚举下 枚 ...
- ssdb make 失败 autoconf required
ERROR! autoconf required! install autoconf first Makefile:4: build_config.mk: No such file or direct ...
- Keystone安装与配置
一.实验目的: 1.掌握OpenStack环境搭建的基础工作 2.掌握keystone的安装与配置方法 3.掌握keystone基础接口的调用方法 二.实验步骤: 1.利用最初创建的快照克隆两台Cen ...
- 微信 PC HOOK
一.概述 Web端有开源代码,但新用户登录不了 PC端也有开源代码,新老用户都能登录 市场上已有的产品:发卡机器人.多群转发机器人.营销管理机器人 基本的功能:收发消息,加人加群,收账抢红包 二.原理 ...
- Github(第一次尝试)
重要提示:项目中的文件最好最好不要出现中文,尤其是复杂的中文文件名. 前提:本地已经用git 管理 一个测试项目(项目一),分支为master. 1.注册 github: http://git.osc ...
- WPF 中 Path 使用虚线
效果如下: 上图由两个圆弧组成,代码如下: <!--红色的实线圆弧,旋转200度,顺时针,获取大圆弧--> <Path Data="M 50,200 A 100,100 2 ...
- 在vue-cli3中使用axios获取本地json
在vue-cli3中,公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取,不能用post,不然会报404 axios..json` ...