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

2019-11-19 15:41:52

字体：大中小

来源：转载

供稿：网友

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 datathis.config = this.route.snapshot.data;// Sets the page titlethis.titleService.setTitle(this.config.title);}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Angular 2 利用Router事件和Title实现动态页面标题的方法

下一篇：通俗解释JavaScript正则表达式快速记忆