[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: '' ...
随机推荐
- php学习笔记5
PHP 常量 常量值被定义后,在脚本的其他任何地方都不能被改变. 一个常量由英文字母.下划线.和数字组成,但数字不能作为首字母出现. (常量名不需要加 $ 修饰符). 注意: 常量在整个脚本中都可以使 ...
- BZOJ1195: [HNOI2006]最短母串(Trie图,搜索)
Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T的子串. Input 第一行是一个正整数n(n<=12) ...
- PYTHON学习第四天课后总结:
第三天学习课后总结: 今日重点: 流程控制 1,if 条件判断语句 2,while 循环 3,for 循环 一,if +条件判断语句: 1> if+条件判断表达式: 子代码1 子代码2 子代 ...
- itchat转发指定的微信群里某个用户的发言到指定的群
复读机功能, 如果有比较多的用户,超出500人,那就得分开至少两个群,如何把一些消息自动复制到另一个群呢. 自动转发指定用户的发言,转发到别的群 # !/usr/bin/env python # -* ...
- Java调用jama实现矩阵运算
Java调用jama实现矩阵运算 一.jama简介 Jama是一个基本的线性代数java包.包括一个基本的Matrix类和5个矩阵分解类. Matrix类提供了基本的线性代数数值运算的功能,不同的构造 ...
- 今天看到可以用sqlalchemy在python上访问Mysql
from sqlalchemy import create_engine, MetaData, and_ 具体的还没有多看.
- Qt之模型/视图(自己定义button)
简述 衍伸前面的章节,我们对QTableView实现了数据显示.自己定义排序.显示复选框.进度条等功能的实现.本节主要针对自己定义button进行解说.这节过后,也希望大家对自己定义有更深入的了解.在 ...
- 9.Spring Boot实战之配置使用Logback进行日志记录
转自:https://blog.csdn.net/meiliangdeng1990/article/details/54300227 Spring Boot实战之配置使用Logback进行日志记录 在 ...
- 编码与乱码(05)---GBK与UTF-8之间的转换--转载
原文地址:http://www.blogjava.net/pengpenglin/archive/2010/02/22/313669.html [GBK转UTF-8] 在很多论坛.网上经常有网友问“ ...
- 11G、12C Data Guard Physical Standby Switchover转换参考手册
Switchover转换 Step 1: switchover 切换先前检查 (1)确保主备两端log_archive_config和db_unique_name参数都已经正确设置. 需要注意的是 ...