Angular 2 利用Router事件和Title實現(xiàn)動態(tài)頁面標題的方法
Angular2 為我們提供了名為Title的Service用于修改和獲取頁面標題，但是如果只是能夠在每個頁面的ngOnInit方法中為每個頁面設置標題豈不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我們想要的結果是在頁面改變時能夠動態(tài)地改變頁面標題，如此最好的解決方案就是組合使用Router事件和Title Service。
Title Service
使用Service自然首先要將其引入，不過要注意Title Service并不在@angular/core中，而是在@angular/platform-browser中：
import { Title } from '@angular/platform-browser';
引入之后，自然要將其注入到當前組件中，而這通常利用constructor完成：
import { Title } from '@angular/platform-browser';
import {Component} from '@angular/core';
@Component({})
export class AppComponent {
constructor(private titleService: Title) {
// 使用this.title到處浪
}
}
很顯然，Title Service應該有某些操作頁面標題的方法，不管通過查找文檔還是查找源碼我們都能很容易知道其只有兩個方法：
- getTitle() 用于獲取當前當前頁面的標題
- setTitle(newTitle: String) 用于設置當前頁面的標題
如果只是簡單地靜態(tài)地設置頁面標題，則可以在ngOnInit方法中直接使用setTitle方法：
// import bala...
@Component({})
export class AppComponent implements OnInit {
constructor(private titleService: Title) {
// 使用this.title到處浪
}
ngOnInit() {
this.titleService.setTitle('New Title Here');
}
}
在ngOnInit中使用setTitle方法設置文檔標題是較好的時機，當然也可以根據(jù)自己的需求在任意地方使用setTitle方法。
Router和Router事件
使用Router和使用Title Service流程基本一致，先引入后注入，不過要注意Router和Title Service類似并不位于@angular/core中，而是位于@angular/router中：
import { Title } from '@angular/platform-browser';
import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({})
export class AppComponent {
constructor(private titleService: Title, private router: Router) {
// 使用this.title和this.router到處浪
}
}
Router配置
Angular2中通過URL、Router和Component之間的對應關系進行頁面之間的跳轉，Router把瀏覽器中的URL看做一個操作指南，據(jù)此可導航到一個由客戶端生成的視圖，并可以把參數(shù)傳給支撐視圖的相應組件。所以我們需要定義路由表：
// import bala...
export const rootRouterConfig: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent, data: {title: 'Home-Liu'} },
{ path: 'about', component: AboutComponent, data: {title: 'About-Liu'} },
{ path: 'github', component: RepoBrowserComponent,
children: [
{ path: '', component: RepoListComponent, data: {title: 'GitHub List'} },
{ path: ':org', component: RepoListComponent,
children: [
{ path: '', component: RepoDetailComponent, data: {title: 'Repo'} },
{ path: ':repo', component: RepoDetailComponent, data: {title: 'RepoDetail'} }
]
}]
},
{ path: 'contact', component: ContactComponent, data: {title: 'Contact-Liu'} }
];
注意路徑和組件之間的對應關系，并且為了能夠在Router事件中獲取到頁面標題，我們在路由表中，為一些頁面提供了數(shù)據(jù)data，并在data中設置了表示頁面標題的title屬性。
Router事件
利用Router事件我們就可以實現(xiàn)動態(tài)改變頁面標題的目的，不過放置的位置很重要，我們這里選擇在AppComponent的ngOnInit方法中利用subscribe訂閱Router事件，因為AppComponent是根組件，所以能夠訂閱所有Router事件：
ngOnInit() {
this.router.events
.subscribe((event) => {
console.log(event); // 包括NavigationStart, RoutesRecognized, NavigationEnd
});
}
當然我們這里這對NavigationEnd事件感興趣：
import {ActivatedRoute} from '@angular/router';
// import bala...
// other codes
ngOnInit() {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('NavigationEnd:', event);
}
});
}
當然使用這種判斷篩選的方式并沒有錯，但是在現(xiàn)在的前端世界里顯得不夠優(yōu)雅，我們應該使用RxJS中的filter達到我們的目的：
import 'rxjs/add/operator/filter';
// import bala...
// other codes
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd) // 篩選原始的Observable：this.router.events
.subscribe((event) => {
console.log('NavigationEnd:', event);
});
}
當然，我們?nèi)绻胍獎討B(tài)改變某個頁面的標題，就需要獲取到當前被展示的頁面對應的路由信息，而這可以通過ActivatedRoute得到，其使用方式和Title Service及Router類似，不再贅述：
import { Title } from '@angular/platform-browser';
import {Component, OnInit} from '@angular/core';
import {Router, NavigationEnd, ActivatedRoute} from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
@Component({})
export class AppComponent implements OnInit {
constructor(private titleService: Title, private router: Router, private activatedRoute: ActivatedRoute) {
// 使用this.title和this.router和this.activatedRoute到處浪
}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute) // 將filter處理后的Observable再次處理
.subscribe((event) => {
console.log('NavigationEnd:', event);
});
}
}
注意這里我們又使用了RxJS中的map來更優(yōu)雅地達成我們目的。
看起來我們已經(jīng)完(luo)成(suo)很多事情了，但是還不夠，我們目前還沒有處理子路由，即我們上文路由配置中的children屬性，所以我們還需要遍歷路由表以便獲取到每一個頁面對應的路由信息：
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map((route) => {
while(route.firstChild) {
route = router.firstChild;
}
return route;
})
.subscribe((event) => {
console.log('NavigationEnd:', event);
});
}
最后，我們還需要獲取到我們在路由表中為每個路由傳入的data信息，然后再利用Title Service設置頁面標題：
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.mergeMap(route => route.data)
.subscribe((event) => this.titleService.setTitle(event['title']));
}
下面是完成的最終代碼，或者也可以到GitHub上查看完整代碼：
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Component({...})
export class AppComponent implements OnInit {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title
) {}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.filter(route => route.outlet === 'primary')
.mergeMap(route => route.data)
.subscribe((event) => this.titleService.setTitle(event['title']));
}
}
參考文檔
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于AngularJS拖拽插件ngDraggable.js實現(xiàn)拖拽排序功能
ngDraggable.js是一款比較簡單實用的angularJS拖拽插件，借助于封裝好的一些自定義指令，能夠快速的進行一些拖拽應用開發(fā)。本文先從基本概念入手，給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04
這篇文章主要介紹了AngularJS 過濾與排序，這里整理了詳細的資料及簡單實例代碼，有需要的小伙伴可以參考下2016-09-09
Agularjs妙用雙向數(shù)據(jù)綁定實現(xiàn)手風琴效果
最近在工作總遇到需要實現(xiàn)類似手風琴效果的需求,下面小編通過本文給大家分享angularjs巧用雙向數(shù)據(jù)綁定實現(xiàn)手風琴效果,需要的朋友可以參考下2017-05-05
AngularJS入門教程二：在路由中傳遞參數(shù)的方法分析
這篇文章主要介紹了AngularJS在路由中傳遞參數(shù)的方法,結合實例形式分析了AngularJS實現(xiàn)路由中傳遞參數(shù)的相關技巧,并總結了相關操作步驟與注意事項,需要的朋友可以參考下2017-05-05
跨域，前端開發(fā)中經(jīng)常遇到的問題，下面這篇文章主要給大家介紹了關于angular.js中解決跨域問題的三種方式，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
angular ng-repeat數(shù)組中的數(shù)組實例
下面小編就為大家?guī)硪黄猘ngular ng-repeat數(shù)組中的數(shù)組實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
詳解angular中通過$location獲取路徑(參數(shù))的寫法
本篇文章主要介紹了詳解angular中通過$location獲取路徑(參數(shù))的寫法 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
今天小編就為大家分享一篇Angular服務Request異步請求的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
angular.js指令中transclude選項及ng-transclude指令詳解
這篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude選項的相關資料，文中介紹的非常詳細，并給出了完整的示例代碼大家參考學習，需要的朋友們下面來一起看看吧。2017-05-05
不得不說指令是ng最為強大的功能之一，好吧，也可以去掉之一，是最強大的功能。下面這篇文章主要給大家介紹了關于Angular4中內(nèi)置指令的基本用法，文中通過示例代碼介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-07-07