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. BZOJ 1108 POI2007 天然气管道Gaz

    题目大意:给定平面上的n个黑点和n个白点.一个黑点仅仅能和右下方的白点匹配.代价为曼哈顿距离,求最小权值完备匹配 STO OTZ STO OTZ STO OTZ ans=Σ(y黑-y白+x白-x黑) ...

  2. [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor

    The upload class will be used in the service layer. Notice it has a constructor for file attribute, ...

  3. Android学习路线(十四)Activity生命周期——停止和重新启动(Stopping and Restarting)一个Activity

    正确地停止和重新启动你的activity在activity的生命周期中是一个非常重要的过程.这样可以确保你的用户感觉到你的应用一直都活着而且没有丢失进度.你的activity的停止和重新启动时有几个重 ...

  4. Cts框架解析(1)-windows下cts配置

    环境搭建 下载 cts工具的下载地址:http://source.android.com/compatibility/downloads.html windows选择Android4.4 R3 Com ...

  5. 在安卓(手机)上运行 Ubuntu (Linux)

    在安卓(手机)上运行 Ubuntu (Linux) 由于x86 和 arm 是跨平台的,所使用的编译器自然也不同.如果要在电脑上编译安卓手机上的程序,则需在电脑端建立ARM交叉编译环境,这个过程是在耗 ...

  6. javascript中if条件

    1.布尔变量 true/false 2.数字非0.非NaN/0.NaN 3.对象非null/null.nudefined 4.字符串非空串/空串 if(!!str){ //do something } ...

  7. 原生js大总结十一

    101.请简述prototype.__proto__ constructor三者的关系   1.prototype:     每一个函数都有一个prototype这个属性,而这个属性指向一个对象,这个 ...

  8. QQ在线交谈代码

    非常多商业站点的右边都会有一个固定或者浮动的层显示QQ在线在线交谈或者咨询的button.当浏览者点击了就会弹出相应的对话框. 这里的QQ交谈有两种: 一种是企业QQ,那要生成以上的功能就非常easy ...

  9. treap-名次树-树堆

    #include <cstring> #include <cstdio> #include <cstdlib> using namespace std; struc ...

  10. 常用的织梦dedecms安全设置集合整理

    织梦系统用户很多,被发现的漏洞也就相对很多,所以网站安全需要做好,很多所谓的“黑客”都是用工具来扫描入侵,厉害点的人是不屑来黑我们的小网站的,所以在我们不是专业维护人员情况下,做好一般的安全防护就可以 ...