angular2路由切換改變頁面title的示例代碼
更新時間：2017年08月23日 16:41:43 作者：avery1
本篇文章主要介紹了angular2路由切換改變頁面title的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
angular2里默認切換路由或者切換組件，頁面的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);
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS使用angular-formly進行表單驗證
這篇文章主要介紹了AngularJS使用angular-formly進行表單驗證的相關(guān)資料,需要的朋友可以參考下2015-12-12
SCE，即strict contextual escaping,我的理解是 嚴格的上下文隔離 ...翻譯的可能不準確，但是通過字面理解，應(yīng)該是angularjs嚴格的控制上下文訪問，通過本文給大家介紹AngularJS 使用$sce控制代碼安全檢查，對angularjs sce相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
Angular Router模塊提供了幾個重要的類來處理路由信息，這篇文章小編就來和大家分享一下這幾個類的使用吧，需要的小伙伴可以收藏一下2023-06-06
angularjs 的數(shù)據(jù)綁定實現(xiàn)原理
本篇文章主要介紹了angularjs 的數(shù)據(jù)綁定實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Angular實踐之將Input與Lifecycle轉(zhuǎn)換成流示例詳解
這篇文章主要為大家介紹了Angular實踐之將Input與Lifecycle轉(zhuǎn)換成流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
AngularJs $parse、$eval和$observe、$watch詳解
這篇文章主要介紹了AngularJs $parse、$eval和$observe、$watch的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了angularjs通過過濾器返回超鏈接的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
組件是一種特殊的指令，使用更簡單的配置項來構(gòu)建基于組件的應(yīng)用程序架構(gòu).這篇文章主要介紹了Angular組件——父組件調(diào)用子組件方法,需要的朋友可以參考下2018-04-04
AngularJS使用攔截器實現(xiàn)的loading功能完整實例
這篇文章主要介紹了AngularJS使用攔截器實現(xiàn)的loading功能,結(jié)合完整實例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
Angular客戶端請求Rest服務(wù)跨域問題的解決方法
本篇文章主要介紹了Angular客戶端請求Rest服務(wù)跨域問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09