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中实现暂停的几篇文章
Mar 04 Javascript
JavaScript效率调优经验
Jun 04 Javascript
web 页面分页打印的实现
Jun 22 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
javascript快速排序算法详解
Sep 17 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
jQuery操作css样式
May 15 jQuery
详解webpack 入门与解析
Apr 09 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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
第五节 克隆 [5]
2006/10/09 PHP
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript 写类方式之八
2009/07/05 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
javascript计算渐变颜色的实例
2017/09/22 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue引入axios同源跨域问题
2018/09/27 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python编码类型转换方法详解
2016/07/01 Python
Python测试模块doctest使用解析
2019/08/10 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
2014升学宴答谢词
2014/01/26 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
小摄影师教学反思
2014/04/27 职场文书
岗位明星事迹材料
2014/05/18 职场文书
毕业生求职信范文
2014/06/29 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
python双向链表实例详解
2022/05/25 Python