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路由事件的更多相关文章

  1. 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性

    [源码下载] 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性 作者:w ...

  2. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  3. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  4. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  5. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  6. Angular 路由⑦要素

    cnzt       http://www.cnblogs.com/zt-blog/p/7919185.html http://www.cnblogs.com/zt-blog/p/7919185.ht ...

  7. angularjs中使用锚点,angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  8. Angular路由使用

    一. 路由:根据不同URL地址,动态让根组件挂载其他组件来实现单页面应用,相对地址 1. 项目一开始创建就会询问是否添加路由(Angular routing) 2. 有无路由区别{ 1. 多了一个ro ...

  9. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. XSS劫持cookie登录

    <script>alert (document.cookie)</script>  获取cookie 实验环境用的DVWA 先用系统账号登录,admin    password ...

  2. mongo [initandlisten] exception in initAndListen: 98 Unable to create/open lock file: /data/db/mongod.lock errno:13 Permission denied Is a mongod instance already running?, terminating 2019-09-23T16:

    解决方法: 加权 sudo chmod -Rf 777 /data/db

  3. C lang:Array and Pointer formal parameter

    Test Xx_Formal parameter Formal parameter are local variable. It's private to the function. Ax_Array ...

  4. mysql5.7 找回密码

    初次接触数据库,二进制安装了mysql5.7以后发现无法像yum一样在日志中找回初始密码~so 首先关掉启动的数据库: 在my.cnf中新增一句: skip-grant-tables  保存退出重启m ...

  5. Data Guard Physical Standby - RAC Primary to RAC Standby 使用第二个网络 (Doc ID 1349977.1)

    Data Guard Physical Standby - RAC Primary to RAC Standby using a second network (Doc ID 1349977.1) A ...

  6. 字节码联盟成立,WebAssembly 生态将完善网络安全性

    近日 Mozilla.Fastly.Intel 与 Red Hat 宣布成立联合组织 Bytecode Alliance(字节码联盟),该联盟旨在通过协作实施标准和提出新标准,以完善 WebAssem ...

  7. 七、3Dslicer的坐标系

    一.参考博客 https://blog.csdn.net/Huadong_eddy/article/details/84988166

  8. Linux基础 —基础要点

    一.请简述Linux安装时的两个必备分区.挂载点和类型. 一般情况下,安装红旗Linux需要两个必备分区,即一个根文件系统分区,挂载点(/),类型为ext3.ext2或reiserfs:一个交换分区, ...

  9. 在CV尤其是CNN领域的一些想法

    现在的CNN还差很多,未来满是变数. 你看,现在的应用领域也无非merely就这么几类----分类识别,目标检测(定位+识别),对象分割......,但是人的视觉可不仅仅这么几个功能啊!是吧. 先说说 ...

  10. 解决python安装第三方库超时问题

    这里说明一下,配置文件中的url还可以换成下面的URL 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.u ...