angular2路由切換改變頁面title

angular2里默認(rèn)切換路由或者切換組件,頁面的title是不會變化的。

angular2在路由設(shè)置里提供了data參數(shù)可以傳值,如下

{

path: 'home',

component: HomeComponent,

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

}

path和component是常用的屬性,path是地址欄的顯示,component是調(diào)用的組件。

data則可以傳數(shù)據(jù),在組件內(nèi)可以調(diào)用。

參數(shù)調(diào)用

angular2提供Title服務(wù)可以修改title。

路由內(nèi)獲取設(shè)置的參數(shù)可以用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);

}

參考鏈接

Angular 2 利用Router事件和Title實(shí)現(xiàn)動態(tài)頁面標(biāo)題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容