Article

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的更多相关文章

  1. [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 ...

  2. 【HTML】Beginner2:page title

    1 page title </head>    contains information about the page </title> the title of the do ...

  3. yii page title, CMenu 中文不显示

    Page title: <?php echo CHtml::encode(iconv('gbk','utf-8',$this->pageTitle)); ?> CMenu: fram ...

  4. Angular2学习笔记——路由器模型(Router)

    Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...

  5. [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 ...

  6. angular2 学习笔记 ( Router 路由 )

    参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...

  7. [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 ...

  8. [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 ...

  9. [Angular2 Router] Index router

    Index router as default router. import {RouterModule} from "@angular/router"; import {NotF ...

随机推荐

  1. Onsctl 配置ONS服务(10G)

    Onsctl Onsctl这个命令是用来管理ONS(Oracle Notification Service)是OracleClustser实现FAN Event Push模型的基础. 在RAC环境下. ...

  2. 推断一个java文件和邮箱格式是否合法

    import java.util.Scanner; public class StringTest { public static void main(String[] args) { int bac ...

  3. Echarts Y轴min显示奇葩问题(做此记录)

    项目需求是根据不同情况显示最大值最小值   有9-35  12-50 9-50 三种情况 前面两种可以显示出来  但是9-50的话  最小值9显示不出来  8,7等就可以显示出来 后面想到强制从最小值 ...

  4. C#监控代码运行的时间

    System.Diagnostics.Stopwatch watch = new System.Diagnostics.Stopwatch(); watch.Start(); //开始监视代码运行时间 ...

  5. 一个理性战胜感性的成功案例:P2P投资和活期理财,纠结中提炼出来的1个数学问题

    我经常是投资了P2P,然后用钱,因而损失了一部分收益. 这是一个让我纠结的问题,为了解决这个问题,我不再凭感觉,而是从现实情况,提炼出来1个数学题,解答我的疑惑. 这是一个理性战胜感性的成功案例~ P ...

  6. 洛谷 P1636 Einstein学画画

    P1636 Einstein学画画 题目描述 Einstein学起了画画, 此人比较懒--,他希望用最少的笔画画出一张画... 给定一个无向图,包含n 个顶点(编号1~n),m 条边,求最少用多少笔可 ...

  7. Android 继承framelayout,实现ScrollView 和 HorizontalScrollView 的效果

    有些项目,需要让控件或者布局进行水平和垂直同时能拖拽,当然,ScrollView 和 HorizontalScrollView 的结合写法是一种写法.但是,这么写用户体验效果不佳,会有迟钝感,因此推荐 ...

  8. idea 配置文件导出,导入

    俗话说的好,磨刀不误砍柴工.配置好自己的工具,这样撸码就会更爽. 来来来,傻瓜式配图开始. 点击后会出现有一个导出设置框默认为全部导出 点击...处 可设置导出的settings.jar包的位置 在新 ...

  9. php高并发秒杀解决方案

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/super_runman/article/details/53037151 在秒杀.抢火车票等地方,我 ...

  10. 当数据库没有备份,redo或undo损坏

    数据库在没有备份的情况下,如果数据库redo或undo损坏,可以通过如下方法处理,但是不一定成功 把init文件中的: undo_management=manual 然后启动数据库到mount 状态后 ...