[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 ...
随机推荐
- 用 OPENSSL 生成不同格式的密钥
用 OPENSSL 生成不同格式的密钥 密钥 key 值包括 加密算法: RSA/DSA/ECC 加密位数: 1024/2048/4096 密钥口令:加密方式有很多 在使用 DSA/ECC 加密算法时 ...
- js29--装饰着模式
//装饰者模式:就是在保证不改变原有对象的基础上,去扩展一些想要的方法或去求 var CarInterface = new BH.Interface('CarInterface' , ['getPri ...
- Android学习笔记进阶16之BitmapShader
<1>简介 具体的看一下博文:Android学习笔记进阶15之Shader渲染 public BitmapShader(Bitmap bitmap,Shader.TileMode ti ...
- 34.node.js之Url & QueryString模块
转自:https://i.cnblogs.com/posts?categoryid=1132005&page=6//引用 var url = require("url"); ...
- Mahout项目开发环境搭建(Eclipse\MyEclipse + Maven)
继续 http://www.tuicool.com/articles/rmiEz2 http://www.cnblogs.com/jchubby/p/4454888.html
- HttpUtility.UrlEncode,Server.UrlEncode 的区别
引用: 1.HttpUtility.UrlEncode,HttpUtility.UrlDecode是静态方法,而Server.UrlEncode,Server.UrlDecode是实例方法. 2.Se ...
- sql server向表里添加字段
ADD mcTypeE VARCHAR(20) NULL,mcGoodsE VARCHAR(20) NULL, mcTypeF VARCHAR(20) NULL,mcGoodsF VARCHAR(20 ...
- CISP/CISA 每日一题 五
CISA 每日一题(答) 信息系统审计师要确认系统变更程序中的: 1.变更需求应有授权.优先排序及跟踪机制: 2.日常工作手册中,明确指出紧急变更程序: 3.变更控制程序应同时为用户及项目开发组认可: ...
- 【2017"百度之星"程序设计大赛 - 初赛(A)】今夕何夕
[链接]http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=775&pid=1005 [题意] 在这里写题意 [题 ...
- oracle 日期
http://blog.itpub.net/126211/viewspace-712986/