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. Spring源码分析专题 —— IOC容器启动过程(上篇)

    声明 1.建议先阅读<Spring源码分析专题 -- 阅读指引> 2.强烈建议阅读过程中要参照调用过程图,每篇都有其对应的调用过程图 3.写文不易,转载请标明出处 前言 关于 IOC 容器 ...

  2. Incapsula免费日本CDN加速和CDNZZ香港CDN节点加速

    Incapsula免费日本CDN加速和CDNZZ香港CDN节点加速 免费的CDN对于那些将空间放在美国的博客网站加速效果是最好的,CDN可以解决国内连接美国的网络线路经常抽风和访问速度时好时坏的问题, ...

  3. textview-显示行数限制

    在代码中直接添加 android:maxLines="2" android:ellipsize="end" 跟ellipsize搭配使用,超过两行的时候,第二行 ...

  4. dot-files/directories 点开头的文件或文件夹(windows/linux)

    What's so special about directories whose names begin with a dot? 不管是 windows 系统,还是类 linux 系统,以点开头的文 ...

  5. 并发,two

    引言 为了更加形象的描述并发的基础知识,因此本文LZ采用了园子里一度大火的标题形式--"没听说过XXXX,就不要说你XXXX了".希望能够给猿友们一个醒目的警醒,借此来普及并发的基 ...

  6. LeetCode Algorithm 05_Longest Palindromic Substring

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  7. Altium Designer中的粉红色网格和绿色框框

  8. 最短路算法详解(Dijkstra/SPFA/Floyd)

    新的整理版本版的地址见我新博客 http://www.hrwhisper.me/?p=1952 一.Dijkstra Dijkstra单源最短路算法,即计算从起点出发到每个点的最短路.所以Dijkst ...

  9. oracle expdp 备份脚本

    #!/bin/bash#Oracle 环境变量 NLS_LANG=AMERICAN_AMERICA.AL32UTF8 ORACLE_SID=zgw ORACLE_BASE=/opt/oracle OR ...

  10. P2P平台很赚钱么?

    最近几年,搞P2P网贷和财富投资相关的金融周边公司,多了很多,楼下门店和电梯里的贷款小广告,真是多啊. 大家都去搞一件事的时候,很可能是大家都觉得这件事有利可图.但事实是,赚钱的总是少数,看到别人搞的 ...