Angular 2+ 监听路由变化动态设置页面标题

原网址：https://segmentfault.com/a/1190000009971757

路由配置代码：const routes: Routes = [{
  path: 'calendar',
  component: CalendarComponent,
 children: [ { path: '', redirectTo: 'new', pathMatch: 'full' }, { path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } }, { path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } }, { path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } } ] }];

根组件设置代码：

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'])); } }

转载于:https://www.cnblogs.com/lyls/p/7471773.html

Angular 2+ 监听路由变化动态设置页面标题相关推荐

reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...
监听localStorage变化（同页面监听）
"当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发" 同页面监听,重写localStorage的方法,抛出自定义事件: &l ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
前端路由的原生代码实现？前端如何监听路由变化？
前端如何监听路由的变化?如何根据前端路由的变化,去操作相应的DOM? 本文从前端层面上,大致解读一下,前端路由的监听与相关DOM操作的方法. 实现的基本原理: 首先,放置指定的DOM标识, 其次,当锚 ...
vue 组件监听页面切换_vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
android 监听界面变化,Android之页面有变化用onWindowFocusChanged来监听权限是否开启...
1 问题我们需要在Activity里面监听网络变化.热点是否开启和关闭.GPS服务是否开启.位置权限是否开启等一些列行为. 2 思路方法一: 如果是需要启动activity进行权限申请,我们可以用 ...
[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...
react 动态修改路由_react.js - React 如何监听路由变化重新渲染组件
问题 // route.js class NewsList extends Component { componentWillMount () { const type = this.props.l ...
vue 监听路由变化
一.watch监听$route($router的对象) // 监听,当路由发生变化的时候执行 watch:{$route(to,from){console.log(to.path);} }, ==== ...

Angular 2+ 监听路由变化动态设置页面标题

Angular 2+ 监听路由变化动态设置页面标题相关推荐

最新文章

热门文章