angular2路由切换改变页面title的示例代码


Posted in Javascript onAugust 23, 2017

angular2里默认切换路由或者切换组件,页面的title是不会变化的。

angular2在路由设置里提供了data参数可以传值,如下

{

path: 'home',

component: HomeComponent,

data: { title: 'Home', aaa: 'aaaa', bbb: 'bbbb', ccc: "cccc"}

}

path和component是常用的属性,path是地址栏的显示,component是调用的组件。

data则可以传数据,在组件内可以调用。

参数调用

angular2提供Title服务可以修改title。

路由内获取设置的参数可以用ActivatedRoute的snapshot的data属性获取

如下:

import { ActivatedRoute } from '@angular/router';

import { Title } from '@angular/platform-browser';

config: any;

constructor(

private route: ActivatedRoute,

private titleService: Title

) { }

ngOnInit(): void {

// Get the config information from the app routing data

this.config = this.route.snapshot.data;

// Sets the page title

this.titleService.setTitle(this.config.title);

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
jquery分页对象使用示例
Apr 01 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue+element实现表单校验功能
May 20 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 #Javascript
bootstrap fileinput实现文件上传功能
Aug 23 #Javascript
jQuery Position方法使用和兼容性
Aug 23 #jQuery
详解EasyUi控件中的Datagrid
Aug 23 #Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 #Javascript
Bootstrap table使用方法记录
Aug 23 #Javascript
JS实现浏览上传文件的代码
Aug 23 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
十一酒店活动方案
2014/02/20 职场文书
母校寄语大全
2014/04/10 职场文书
小学三年级学生评语
2014/04/22 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
小学教师培训方案
2014/06/09 职场文书
财务会计专业自荐书
2014/06/30 职场文书
未婚证明书模板
2014/10/08 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS