angular2路由切換改變頁(yè)面title的示例代碼
更新時(shí)間：2017年08月23日 16:41:43 作者：avery1
本篇文章主要介紹了angular2路由切換改變頁(yè)面title的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
angular2里默認(rèn)切換路由或者切換組件，頁(yè)面的title是不會(huì)變化的。
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);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angularJs提交文本框數(shù)據(jù)到后臺(tái)的方法
今天小編就為大家分享一篇angularJs提交文本框數(shù)據(jù)到后臺(tái)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
詳解Angular中通過(guò)$location獲取地址欄的參數(shù)
這篇文章主要介紹了詳解 Angular中通過(guò)$location獲取地址欄的參數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
$scope 的使用貫穿整個(gè) Angular App 應(yīng)用,它與數(shù)據(jù)模型相關(guān)聯(lián),同時(shí)也是表達(dá)式執(zhí)行的上下文.有了 $scope 就在視圖和控制器之間建立了一個(gè)通道,基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新 $scope,同樣的 $scope 發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖.2016-08-08
本篇文章主要介紹了詳解AngularJS 模塊化，模塊用于單獨(dú)的邏輯表示服務(wù),控制器,應(yīng)用程序等,并保持代碼的整潔。有興趣的可以了解一下2017-06-06
我們將通過(guò)示例介紹一種在 Angular 應(yīng)用程序中獲取當(dāng)前日期的簡(jiǎn)單方法，我們還將解決如何更改 Angular 中的日期格式，對(duì)在Angular中獲取當(dāng)前日期感興趣的朋友跟隨小編一起看看吧2023-05-05
AngularJS折疊菜單實(shí)現(xiàn)方法示例
這篇文章主要介紹了AngularJS折疊菜單實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)折疊菜單的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
解決nodejs中使用http請(qǐng)求返回值為html時(shí)亂碼的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決nodejs中使用http請(qǐng)求返回值為html時(shí)亂碼的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個(gè)指令的講解,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了AngularJS模板加載用法,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS模板加載所涉及的屬性、方法、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11