In our root component, one thing we can do is subscribe to Router events, and do something related to router events. So how can we get router event?

export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.events
.subscribe(events => console.log(events))
}
}

To events we log out from 'this.router.events' is actually the same as we enable router tracing.

If you only interested in one event 'NavigationEnd', we can use RxJS filter:

import 'rxjs/add/opreator/fitler';

export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(events => console.log(events))
}
}

Here we use 'instanceof', this is because which event is a class. So we can use instanceof to filter according to the class.

[Angular] Subscribing to router events的更多相关文章

  1. [Angular2 Router] Setup page title with Router events

    Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...

  2. Angular.js之Router学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. [Angular 2] Handling Click Events with Subjects

    While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.from ...

  4. http://angular.github.io/router/

    Angular New Router Guide Configuring the Router- This guide shows the many ways to map URLs to compo ...

  5. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  6. [Angular] Auxiliary named router outlets

    Define a auxilliary router: export const ROUTES: Routes = [ { path: 'folder/:name', component: MailF ...

  7. [Angular Directive] 3. Handle Events with Angular 2 Directives

    A @Directive can also listen to events on their host element using @HostListener. This allows you to ...

  8. [Angular 2] Child Router

    Benefit to use child router is Angualr 2 then can lazy load the component on demand. Define a child ...

  9. [Angular] Subscribing to the valueChanges Observable

    For example we have built a form: form = this.fb.group({ store: this.fb.group({ branch: '', code: '' ...

随机推荐

  1. stm8开发环境配置及测试

    需要准备的软件,硬件,IAR for stm8 (EWSTM8).stm8s标准固件库.ST-LINK.STM8s003f3核心板 安装IAR(其中包括st-link的驱动), 到这个网址下载stm8 ...

  2. dropdown下拉菜单

    <!--声明方式的下拉菜单:三个要点--> <!--1 外围容器用dropdown包裹--> <!--2 内部点击事件data-toggle--> <!--3 ...

  3. bzoj3307雨天的尾巴(权值线段树合并/DSU on tree)

    题目大意: 一颗树,想要在树链上添加同一物品,问最后每个点上哪个物品最多. 解题思路: 1.线段树合并 假如说物品数量少到可以暴力添加,且树点极少,我们怎么做. 首先在一个树节点上标记出哪些物品有多少 ...

  4. liunx中安装禅道

    本文转自:https://www.cnblogs.com/bendouyao/p/10026746.html 一.准备工作 禅道安装包ZenTaoPMS.8.1.3.zbox_64.gz,上传至服务器 ...

  5. vim学习4

    分频 参考 http://coolshell.cn/articles/1679.htm

  6. 阅读笔记——Web应用程序

    Web应用程序与DD文件 Web应用程序 web应用程序是一种可以通过Web访问的应用程序.Web应用程序最大的好处是永和很容易访问应用程序.用户只需要有浏览器即可,不需要安装其他任何软件.一个Web ...

  7. HUSTOJ 1072 小数背包问题

    HUSTOJ 1072 小数背包问题 题目描述 有一个背包,背包容量是M(0<M≤500),有N(1<N≤1000)个物品,物品可以分割成任意大小. 要求尽可能让装入背包中的物品总价值最大 ...

  8. [Python] Different ways to test multiple flags at once in Python

    x, y, z = 0, 1, 0 if x == 1 or y == 1 or z == 1: print('passed') if 1 in (x, y, z): print('passed') ...

  9. robot framework 使用三:浏览器兼容性自己主动化

    robot framework 測试浏览器兼容性 上图中黄色圈的地方默认什么都不写.是firefox浏览器,写上ie就是ie浏览器了 firefox最新版本号即可.ie须要设置: 1. IE选项设置的 ...

  10. Eclipse导入Maven项目出现错误:Unsupported IClasspathEntry kind=4

    使用Eclipse导入Maven项目失败,提示: An internal error occurred during: "Importing Maven projects". Un ...