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 剧场版 你必须知道的javascript
May 27 Javascript
Prototype Array对象 学习
Jul 19 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 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获取某个目录大小的代码
2008/09/10 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
JS实现简单的表格增删
2020/01/16 Javascript
js实现3D旋转相册
2020/08/02 Javascript
python创建文件备份的脚本
2018/09/11 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
暑期社会实践感言
2014/02/25 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL