[Angular2 Router] Setup page title with Router events
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap'; import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser'; @Component({...})
export class AppComponent implements OnInit {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title
) {}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.filter(route => route.outlet === 'primary')
.mergeMap(route => route.data)
.subscribe((event) => this.titleService.setTitle(event['title']));
}
}
[Angular2 Router] Setup page title with Router events的更多相关文章
- [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation
In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...
- 【HTML】Beginner2:page title
1 page title </head> contains information about the page </title> the title of the do ...
- yii page title, CMenu 中文不显示
Page title: <?php echo CHtml::encode(iconv('gbk','utf-8',$this->pageTitle)); ?> CMenu: fram ...
- Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
- [React Router v4] Use the React Router v4 Link Component for Navigation Between Routes
If you’ve created several Routes within your application, you will also want to be able to navigate ...
- angular2 学习笔记 ( Router 路由 )
参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...
- [Angular2 Router] Auxiliary Routes bit by bit
Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...
- [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parame ...
- [Angular2 Router] Index router
Index router as default router. import {RouterModule} from "@angular/router"; import {NotF ...
随机推荐
- Apache-DBUtils包对数据库的操作
•commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装.学习成本极低.而且使用dbutils能极大简化jdbc编码的工作量,同一时候也不会影 ...
- sql%rowcount 返回影响行数
oracle中.返回影响行数是:If sql%rowcount 举例: update ut_calenderStatus t set t.calenderstatus=pi_flg, t.m=pi_M ...
- ViewPager 入门一
使用ViewPager能够得到不同view的切换效果 例如以下图,实现了四个view间的相互滑动 一.新建项目,引入ViewPager控件 ViewPager.它是google SDk中自带的一个附加 ...
- vim学习2
进入插入模式: 在插入模式下删除: 寄存器
- 背景剪除和OpenCV中的实现
转载请注明出处! ! ! http://blog.csdn.net/zhonghuan1992 背景剪除和OpenCV中的实现 背景与前景都是相对的概念.以快速公路为例:有时我们对快速公路上来来往往的 ...
- HTML实体与网页编码(汉字转化为了html实体) .
http://blog.csdn.net/f438952359/article/details/7481267 HTML实体与网页编码(汉字转化为了html实体) . htmlencodingfunc ...
- Excel 下拉菜单制作
废话少说吧,以图明示: 图1 操作步骤(环境为Office 2013) 备注,第四步,可以选择页面中的数据源,也可以以“,”分割的方式输入字符串 图2 制作效果
- Oracle动态SQL语句
动态SQL返回游标: create or replace procedure proc_ValidityDueQuery( p_regioncode in number, p_pscode in nu ...
- noi25 最长最短单词(为什么会出现运行时错误)
noi25 最长最短单词(为什么会出现运行时错误) 一.总结 一句话总结:比如除以零,数组越界,指针越界,使用已经释放的空间,数组开得太大,超出了栈的范围,造成栈溢出 1.c++报runtime er ...
- C++的模板template
模板是C++支持参数化多态的工具,使用模板可以使用户为类或者函数声明一种一般模式,使得类中的某些数据成员或者成员函数的参数.返回值取得任意类型. 模板是一种对类型进行参数化的工具: 因此,使用模板的目 ...