[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 ...
随机推荐
- Onsctl 配置ONS服务(10G)
Onsctl Onsctl这个命令是用来管理ONS(Oracle Notification Service)是OracleClustser实现FAN Event Push模型的基础. 在RAC环境下. ...
- 推断一个java文件和邮箱格式是否合法
import java.util.Scanner; public class StringTest { public static void main(String[] args) { int bac ...
- Echarts Y轴min显示奇葩问题(做此记录)
项目需求是根据不同情况显示最大值最小值 有9-35 12-50 9-50 三种情况 前面两种可以显示出来 但是9-50的话 最小值9显示不出来 8,7等就可以显示出来 后面想到强制从最小值 ...
- C#监控代码运行的时间
System.Diagnostics.Stopwatch watch = new System.Diagnostics.Stopwatch(); watch.Start(); //开始监视代码运行时间 ...
- 一个理性战胜感性的成功案例:P2P投资和活期理财,纠结中提炼出来的1个数学问题
我经常是投资了P2P,然后用钱,因而损失了一部分收益. 这是一个让我纠结的问题,为了解决这个问题,我不再凭感觉,而是从现实情况,提炼出来1个数学题,解答我的疑惑. 这是一个理性战胜感性的成功案例~ P ...
- 洛谷 P1636 Einstein学画画
P1636 Einstein学画画 题目描述 Einstein学起了画画, 此人比较懒--,他希望用最少的笔画画出一张画... 给定一个无向图,包含n 个顶点(编号1~n),m 条边,求最少用多少笔可 ...
- Android 继承framelayout,实现ScrollView 和 HorizontalScrollView 的效果
有些项目,需要让控件或者布局进行水平和垂直同时能拖拽,当然,ScrollView 和 HorizontalScrollView 的结合写法是一种写法.但是,这么写用户体验效果不佳,会有迟钝感,因此推荐 ...
- idea 配置文件导出,导入
俗话说的好,磨刀不误砍柴工.配置好自己的工具,这样撸码就会更爽. 来来来,傻瓜式配图开始. 点击后会出现有一个导出设置框默认为全部导出 点击...处 可设置导出的settings.jar包的位置 在新 ...
- php高并发秒杀解决方案
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/super_runman/article/details/53037151 在秒杀.抢火车票等地方,我 ...
- 当数据库没有备份,redo或undo损坏
数据库在没有备份的情况下,如果数据库redo或undo损坏,可以通过如下方法处理,但是不一定成功 把init文件中的: undo_management=manual 然后启动数据库到mount 状态后 ...