[Angular] Subscribing to router events
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的更多相关文章
- [Angular2 Router] Setup page title with Router events
Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...
- Angular.js之Router学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- [Angular 2] Handling Click Events with Subjects
While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.from ...
- http://angular.github.io/router/
Angular New Router Guide Configuring the Router- This guide shows the many ways to map URLs to compo ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- [Angular] Auxiliary named router outlets
Define a auxilliary router: export const ROUTES: Routes = [ { path: 'folder/:name', component: MailF ...
- [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 ...
- [Angular 2] Child Router
Benefit to use child router is Angualr 2 then can lazy load the component on demand. Define a child ...
- [Angular] Subscribing to the valueChanges Observable
For example we have built a form: form = this.fb.group({ store: this.fb.group({ branch: '', code: '' ...
随机推荐
- MySQL 使用mysqld_multi部署单机多实例详细过程
,如何使用多实例 由于多实例中,各个实例的资源都是不share的,所以要合理分配好各个实例的内存.磁盘等资源,避免out of memery或则 full disk的情况出现.
- innodb next-key lock解析
參考http://blog.csdn.net/zbszhangbosen/article/details/7434637#reply 这里补充一些: (1)InnoDB默认加锁方式是next-key ...
- layout-maxWidth属性用法
对于maxWidth属性,相信大家都不陌生.不过,今天我遇到了一个问题,就是当我希望一个relayout的宽度有个最大值的时候,用maxWidth却没办法实现.这里总结下maxWidth 的用法 1. ...
- ORACLE11g R2【RAC+ASM→RAC+ASM】
ORACLE11g R2[RAC+ASM→RAC+ASM] 本演示案例所用环境:RAC+ASM+OMF primary standby OS Hostname node1,node2 dgnode ...
- Win7下IE11点击无反应的解决方法
平台:win7 sp1 32bit 问题:点击Internet Explorer在开始菜单.快捷栏的图标和安装目录下的程序均没有反应,鼠标在变成漏斗后恢复原状再无反应.但搜狗浏览器和360浏览器下使用 ...
- 理解String的compareTo()方法返回值
compareTo()的返回值是整型,它是先比较对应字符的大小(ASCII码顺序), 如果第一个字符和参数的第一个字符不等,结束比较,返回他们之间的差值. 如果第一个字符和参数的第一个字符相等,则以第 ...
- 为SSO 5.5恢复忘记的administrator@vsphere.local密码
转自:http://blog.itpub.net/27042095/viewspace-1179938/ 1. cd \Program Files\VMware\Infrastructure\VMwa ...
- 国密算法SM2证书制作
国密算法sm2非对称算法椭圆曲线 原文:http://www.jonllen.cn/jonllen/work/162.aspx 前段时间将系统的RSA算法全部升级为SM2国密算法,密码机和UKey硬件 ...
- OpenNI2获取华硕XtionProLive深度图和彩色图并用OpenCV显示
使用OpenNI2打开XtionProLive时有个问题,彩色图分辨率不管怎样设置始终是320*240,深度图倒是能够设成640*480,而OpenNI1.x是能够获取640*480的彩色图的. 彩色 ...
- C语言深度剖析-----C语言中的字符串
S1字符数组 S2字符串,存在于栈空间 S3最常规的写字符串的方法,malloc是堆空间,存在于只读存储区,我们不能够改变指向S3的数据 S4堆空间 S4 字符串的长度 判断字符串长度,assert ...