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