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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:31:46

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

Angular 2 利用Router事件和Title實(shí)現(xiàn)動(dòng)態(tài)頁面標(biāo)題的方法:Angular2 為我們提供了名為Title的Service用于修改和獲取頁面標(biāo)題，但是如果只是能夠在每個(gè)頁面的ngOnInit方法中為每個(gè)頁面設(shè)置標(biāo)題豈不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我們想要的結(jié)果是在頁面改變時(shí)能夠動(dòng)態(tài)地改變頁面標(biāo)題，如此最好的解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Angular 2 利用Router事件和Title實(shí)現(xiàn)動(dòng)態(tài)頁面標(biāo)題的方法:Angular2 為我們提供了名為Title的Service用于修改和獲取頁面標(biāo)題，但是如果只是能夠在每個(gè)頁面的ngOnInit方法中為每個(gè)頁面設(shè)置標(biāo)題豈不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我們想要的結(jié)果是在頁面改變時(shí)能夠動(dòng)態(tài)地改變頁面標(biāo)題，如此最好的解

Angular2 為我們提供了名為Title的Service用于修改和獲取頁面標(biāo)題，但是如果只是能夠在每個(gè)頁面的ngOnInit方法中為每個(gè)頁面設(shè)置標(biāo)題豈不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我們想要的結(jié)果是在頁面改變時(shí)能夠動(dòng)態(tài)地改變頁面標(biāo)題，如此最好的解決方案就是組合使用Router事件和Title Service。

Title Service

使用Service自然首先要將其引入，不過要注意Title Service并不在@angular/core中，而是在@angular/platform-browser中：

import { Title } from '@angular/platform-browser';

引入之后，自然要將其注入到當(dāng)前組件中，而這通常利用constructor完成：

import { Title } from '@angular/platform-browser';
import {Component} from '@angular/core';
@Component({})
export class AppComponent {
 constructor(private titleService: Title) {
 // 使用this.title到處浪
 }
}

很顯然，Title Service應(yīng)該有某些操作頁面標(biāo)題的方法，不管通過查找文檔還是查找源碼我們都能很容易知道其只有兩個(gè)方法：

getTitle() 用于獲取當(dāng)前當(dāng)前頁面的標(biāo)題

setTitle(newTitle: String) 用于設(shè)置當(dāng)前頁面的標(biāo)題

如果只是簡單地靜態(tài)地設(shè)置頁面標(biāo)題，則可以在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方法設(shè)置文檔標(biāo)題是較好的時(shí)機(jī)，當(dāng)然也可以根據(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之間的對(duì)應(yīng)關(guān)系進(jìn)行頁面之間的跳轉(zhuǎn)，Router把瀏覽器中的URL看做一個(gè)操作指南，據(jù)此可導(dǎo)航到一個(gè)由客戶端生成的視圖，并可以把參數(shù)傳給支撐視圖的相應(yīng)組件。所以我們需要定義路由表：

// 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'} }
];

注意路徑和組件之間的對(duì)應(yīng)關(guān)系，并且為了能夠在Router事件中獲取到頁面標(biāo)題，我們?cè)诼酚杀碇校瑸橐恍╉撁嫣峁┝藬?shù)據(jù)data，并在data中設(shè)置了表示頁面標(biāo)題的title屬性。

Router事件

利用Router事件我們就可以實(shí)現(xiàn)動(dòng)態(tài)改變頁面標(biāo)題的目的，不過放置的位置很重要，我們這里選擇在AppComponent的ngOnInit方法中利用subscribe訂閱Router事件，因?yàn)锳ppComponent是根組件，所以能夠訂閱所有Router事件：

ngOnInit() {
 this.router.events
 .subscribe((event) => {
 console.log(event); // 包括NavigationStart, RoutesRecognized, NavigationEnd
 });
}

當(dāng)然我們這里這對(duì)NavigationEnd事件感興趣：

import {ActivatedRoute} from '@angular/router';
// import bala...

// other codes

ngOnInit() {
 this.router.events
 .subscribe((event) => {
 if (event instanceof NavigationEnd) {
 console.log('NavigationEnd:', event);
 }
 });
}

當(dāng)然使用這種判斷篩選的方式并沒有錯(cuò)，但是在現(xiàn)在的前端世界里顯得不夠優(yōu)雅，我們應(yīng)該使用RxJS中的filter達(dá)到我們的目的：

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);
 });
}

當(dāng)然，我們?nèi)绻胍獎(jiǎng)討B(tài)改變某個(gè)頁面的標(biāo)題，就需要獲取到當(dāng)前被展示的頁面對(duì)應(yīng)的路由信息，而這可以通過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)雅地達(dá)成我們目的。

看起來我們已經(jīng)完(luo)成(suo)很多事情了，但是還不夠，我們目前還沒有處理子路由，即我們上文路由配置中的children屬性，所以我們還需要遍歷路由表以便獲取到每一個(gè)頁面對(duì)應(yīng)的路由信息：

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);
 });
}

最后，我們還需要獲取到我們?cè)诼酚杀碇袨槊總€(gè)路由傳入的data信息，然后再利用Title Service設(shè)置頁面標(biāo)題：

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']));
 }
}

參考文檔

Angular2 路由指導(dǎo)

Angualr2 ActivatedRoute文檔

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com