[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 ...
随机推荐
- iOS 基于第三方QQ授权登录
基于iOS实现APP的第三方QQ登陆.接入第三方SDK时的一个主要的步骤: 1,找到相关的开放平台.QQ互联平台,http://connect.qq.com/: 2,注冊成功后创建自己的APP.填写一 ...
- 魔兽世界serverTrinitycore分析一:前言
一:简单介绍 项目地址:https://github.com/TrinityCore/TrinityCore 帖一段官网介绍吧 TrinityCore is a MMORPG Framework ba ...
- mahout-distribution-0.9.tar.gz的安装的与配置、启动与运行自带的mahout算法
不多说,直接上干货! 首先,别在windows下搭建什么,安装什么Cygwin啊!直接在linux,对于企业里推荐用CentOS6.5,在学校里用Ubuntu. Mahout安装所需软件清单: 软件 ...
- Writing buffer overflow exploits - a tutorial for beginners
Buffer overflows in user input dependent buffers have become one of the biggest security hazards on ...
- 一筐梨子&一筐水果——协变性(covariant)
假设突然看见这个问题.我们常常会想当然. 一个梨子是水果,一筐梨子是一筐水果吗? watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXFqMjA2NQ==/f ...
- 整理wmic使用,不重启变环境变量 .
整理wmic使用,不重启变环境变量 . 利用wmic修改是直接生效的:(e:\tools 是新添加的目录) wmic ENVIRONMENT where "name='path' and u ...
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第六篇:拦截器
摘要 本文将对“MVC公告发布系统”的发布公告功能添加日志功能和异常处理功能,借此来讨论ASP.NET MVC中拦截器的使用方法. 一个小难题 我们继续完善“MVC公告发布系统”, ...
- Appium_Python_API
1) find_element_by_android_uiautomator (‘new UiSelector().text(“XXXX”)’).click 正常匹配2) find_element_b ...
- Mongodb总结5-通过装饰模式,用Mongodb解决Hbase的不稳定问题
最近继续学习Mongodb的根本原因,是为了解决今天的问题.项目中用到了Hbase,生产环境服务器用了3台,但是不够稳定,每2天左右,就连不上了.重启就好了,当然,这是一个历史遗留问题.我在想,是不是 ...
- 00103_死锁、Lock接口、等待唤醒机制
1.死锁 (1)同步锁使用的弊端:当线程任务中出现了多个同步(多个锁)时,如果同步中嵌套了其他的同步.这时容易引发一种现象:程序出现无限等待,这种现象我们称为死锁.这种情况能避免就避免掉: synch ...