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. C++集合运算函数总结 & 需要有序集合的操作

    前提:两个集合已经有序.merge() //归并两个序列,元素总个数不变,只是将两个有序序列归并为一个有序序列.set_union() //实现求集合A,B的并.set_difference()//实 ...

  2. Tomcat之虚拟主机配置以及web应用配置

    Tomcat之虚拟主机配置以及web应用配置 Tomcat文件夹结构例如以下: bin ---- 启动和关闭须要的bat文件所在的文件夹 conf --- 配置文件夹 lib ---  tomcat执 ...

  3. 一个简单RPC框架是怎样炼成的(II)——制定RPC消息

    开局篇我们说了,RPC框架的四个核心内容 RPC数据的传输. RPC消息 协议 RPC服务注冊 RPC消息处理 以下,我们先看一个普通的过程调用 class Client(object): def _ ...

  4. 转一篇对EJB理解的文章

    1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业级开发",那么 ...

  5. vue 刷新当前页面的方式

    1.使用window.location.href window.location.replace() window.location.reload() 会出现空白,体验不是很好 2.先进入一个空路由, ...

  6. Direct2D 如何关闭抗锯齿

    // Each pixel is rendered if its pixel center is contained by the geometry. // D2D1_ANTIALIAS_MODE_A ...

  7. 洛谷 P1679 神奇的四次方数

    P1679 神奇的四次方数 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知同学了.在班级里负责联络网的是dm同学,于是v神便找到了dm同学,可dm同学正在忙于研究一道有趣的数 ...

  8. animation- 动画效果实现(代码中)

    1,首先我们看一下如下的代码 import android.view.animation.LayoutAnimationController; import android.view.animatio ...

  9. android 闹钟提醒并且在锁屏下弹出Dialog对话框并播放铃声和震动

    android 闹钟提醒并且在锁屏下弹出Dialog对话框并播放铃声和震动            1.先简单设置一个闹钟提醒事件: //设置闹钟 mSetting.setOnClickListener ...

  10. 14、序列化操作,类的保存和dict转JSON

    在程序运行的过程中,所有的变量都是在内存中,比如,定义一个dict: d = dict(name='Bob', age=20, score=88) 可以随时修改变量,比如把name改成'Bill',但 ...