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. Redis 实现美团的外卖派单系统“附近的人”筛选实战原理分析

    针对“附近的人”这一位置服务领域的应用场景,常见的可使用PG.MySQL和MongoDB等多种DB的空间索引进行实现.而Redis另辟蹊径,结合其有序队列zset以及geohash编码,实现了空间搜索 ...

  2. laravel大量填充项目测试数据的正确方法

    项目开发时,一般都会有到项目测试数据的准备操作,以前都是基于PHP代码自主编写sql语句,然后循环的插入到数据库中里面,当当我们接触过laravel数据库后,就可以很方便的完成项目的测试数据准备. 但 ...

  3. C lang:Protect array data——Const

    Xx_Introduction Use pointer translate parameter array original data will change data,and use const p ...

  4. 解决Android Screen Monitor在android8.0及以上系统报错:"E/Screenshot: Unsupported protocol: 2"

    1.打开命令窗口,切换到 asm.jar 所在目录,执行 java -jar asm.jar,正常情况下打开后连接上设备会显示出画面 2.但是在android8.0以上系统该asm.jar包就无法正常 ...

  5. 在IOS设备上POST提交form表单,后台接收不到值怎么办?

    原文:https://blog.csdn.net/xhaimail/article/details/90440029 最近在工作上遇到一个奇葩问题,在Android和Windows平台上做请求时参数都 ...

  6. [CodeForces - 1272D] Remove One Element 【线性dp】

    [CodeForces - 1272D] Remove One Element [线性dp] 标签:题解 codeforces题解 dp 线性dp 题目描述 Time limit 2000 ms Me ...

  7. windowsServer---- 在iis 上安装网站

    1.找到信息服务IIS 管理器如图: 2.进入后进行配置 3.添加本地网站 配置网站 如果域名没有解析的话,可以在添加一个  端口用于测试 点击浏览就行查看 如果报错 解决:找到目录浏览,并启动 点击 ...

  8. ASP.NET中使用附文本框插件

    使用附文本选项框插件步骤 Newtonsoft.Json 改变js的配置文件的url 最后一定要关闭页面中的 ValidateRequest=false

  9. Spring注解的使用和组件扫描

    非常重要] 组件扫描(Component-Scan) 通过配置组件扫描,可以使得spring自动扫描package,而不必在spring的配置文件中逐一声明各个<bean> 在配置组件扫描 ...

  10. 关于 Sublime Text 3 中 input 无法输入的问题

    在新装的 Sublime Text 3 中,Ctrl + B 运行时会发现无法正常输入,我记录了一下我的解决方法. 相关原文可参照 https://blog.csdn.net/weixin_42116 ...