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 相关文章推荐
Javascript的闭包
Dec 31 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
js实现五星评价功能
2017/03/08 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
常见的python正则用法实例讲解
2016/06/21 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
武汉英思工程科技有限公司–ORACLE面试测试题目
2012/04/30 面试题
逃课上网检讨书
2014/02/20 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
导游词之襄阳古城
2019/09/27 职场文书