[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: '' ...
随机推荐
- JavaScript--数据结构之栈
4.1栈是一种高效的数据结构,是一种特殊的列表.栈内元素只能通过列表的一端访问,也就称为栈顶.后入的先出的操作.Last in First out.所以他的访问每次是访问到栈顶的元素,要想访问其余的元 ...
- 洛谷——P1540 机器翻译
https://www.luogu.org/problem/show?pid=1540#sub 题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的 ...
- GraphX 图数据建模和存储
背景 简单分析一下GraphX是怎么为图数据建模和存储的. 入口 能够看GraphLoader的函数. def edgeListFile( sc: SparkContext, path: String ...
- UVa 11015 - 05-2 Rendezvous
題目:有一個班級的學生要一起寫作業,所以他們要到一個統一的地點.現在給你他們各自的位置, 問集合地點定在哪,能够讓全部人走的總路徑長度最小. 分析:圖論.最短路.直接利用Floyd計算最短路,找到和值 ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- MVC中url路由规则
Routing:首先获取视图页面传过来的请求,并接受url路径中的controller和action以及参数数据,根据规则将识别出来的数据传递给某controller中的某个action方法 MapR ...
- warning: expression result unuesd 可能原因是函数忘了加括号,
- sprinng in action 第四版第六章中的ValidationMessages.properties不起作用
文件名必须是ValidationMessages.properties,必须放在类的根目录下
- OC学习篇之---类的定义
OC中类的相关知识 OC和C的最大区别就是具有了面向对象的功能,那么说到面向对象,就不得不说类这个概念了,如果学过Java的话,那么对类和对象的概念就不陌生了,因为Java是非常纯正的面向对象设计语言 ...
- PHP实现查询两个数组中不同元素的方法
以下实例讲述了PHP实现查询两个数组中不同元素的方法.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...