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. 取消cp命令别名

    1. 取消cp命令别名unalias cpcp -rf恢复别名alias cp='cp -i'2.关闭当前用户下的cp别名配置sed -i "s/alias cp='cp -i'/#alia ...

  2. 最优子结构(Optimal Substructure)

    最优子结构的存在是应用动态规划的前提(或者说必要条件),由此可以避免重复计算: 1. 图算法 最短路径的子路径也一定是最短的: 简单地反证,如果最短路径的中间两点,之间的路径不是最短路径的话,那么一定 ...

  3. 4.dubbo-demo+简易监控中心安装+管理控制台安装

    转自:https://blog.csdn.net/zhangweigangweiwu/article/details/52244099 tomcat:apache-tomcat-6.0.39 需要用到 ...

  4. 数组-reduce方法

    转自: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/139 实现 convert 方法,把原始 list ...

  5. CF1009F Dominant Indices(树上DSU/长链剖分)

    题目大意: 就是给你一棵以1为根的树,询问每一个节点的子树内节点数最多的深度(相对于这个子树根而言)若有多解,输出最小的. 解题思路: 这道题用树链剖分,两种思路: 1.树上DSU 首先想一下最暴力的 ...

  6. 【Good Bye 2017 C】 New Year and Curling

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举前i-1个圆. 哪些圆和它相交. 取圆心纵坐标最大的那个圆就可以了. [代码] #include <bits/stdc++ ...

  7. ORA-00957: 反复的列名

    1.错误描写叙述 ORA-00957: 反复的列名 2.错误原因 SQL> create table info( 2 stu_id varchar2(7) not null, 3 stu_nam ...

  8. JavaScript篇(一)二叉树的插入 (附:可视化)

    一.二叉树概念 二叉树(binary tree)是一颗树,其中每个节点都不能有多于两个的儿子. 字节一面,第一道就是二叉树的插入,在这里其实是对于一个二叉查找树的插入. 使二叉树成为二叉查找树的性质是 ...

  9. setAttribute的浏览器兼容性

    1.element要用getElementById 或者是ByTagName来得到 2.setAttribute("class", vName)中class是指改变"cl ...

  10. Flask项目之手机端租房网站的实战开发(四)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...