摘要：今天我們實現單頁面應用中路由變化設置頁面標題，來優化用戶的用戶體驗。在中，解決起來要比容易得多，我們可以通過注入一個，在路由變化事件中使用提供的來動態更新頁面標題。

現在很多web網站都采用了SPA單頁應用，單頁面有很多優點：用戶體驗好、應用響應快、對服務器壓力小 等等。同時也有一些缺點：首次加載資源太多，不利于SEO，前進、后退、地址欄需要手動管理。今天我們實現Angular單頁面應用中路由變化設置頁面標題，來優化用戶的用戶體驗?？梢韵热ゾ蚪鹂聪滦Ч?。稀土掘金

在AngularJS（1.x）中動態設置頁面標題通常是通過一個全局$rootScope對象來完成的，通過$rootScope對象監聽路由變化獲取當前路由信息并映射到頁面標題。在Angular（v2 +）中，解決起來要比1.x容易得多，我們可以通過注入一個provider，在路由變化事件中使用provider提供的API來動態更新頁面標題。

在angular中，我們可以通過Title來設置頁面標題。我們從platform-browser導入Title, 同時也導入Router。

import { Title } from "@angular/platform-browser";
import { Router } from "@angular/router";

導入之后，我們在組件的構造函數中注入他們

@Component({
  selector: "app-root",
  templateUrl: `
    

      Hello world!
    
  `
})
export class AppComponent {
  constructor(private router: Router, private titleService: Title) {}
}

在使用Title之前，我們先看下Title是如何定義的

export class Title {
  /**
   * Get the title of the current HTML document.
   * @returns {string}
   */
  getTitle(): string { return getDOM().getTitle(); }

  /**
   * Set the title of the current HTML document.
   * @param newTitle
   */
  setTitle(newTitle: string) { getDOM().setTitle(newTitle); }
}

Title類有兩個方法，一個用來獲取頁面標題getTitle， 一個是用來設置頁面標題的setTitle

要更新頁面標題，我們可以簡單的調用setTitle方法:

@Component({...})
export class AppComponent implements OnInit {
  constructor(private router: Router, private titleService: Title) {}
  ngOnInit() {
    this.titleService.setTitle("My awesome app");
  }
}

這樣就可以設置我們的頁面標題了，但是很不優雅。我們接著往下看。

在AngularJS中，我們可以使用ui-router為每個路由添加一個自定義對象，自定義的對象在路由器的狀態鏈中繼承：

// AngularJS 1.x + ui-router
.config(function ($stateProvider) {
  $stateProvider
    .state("about", {
      url: "/about",
      component: "about",
      data: {
        title: "About page"
      }
    });
});

在Angular2+中，我們也可以為每個路由定義一個data對象，然后再在監聽路由變化時做一些額外的邏輯處理就可以實現動態設置頁面標題。首先，我們定義一個基本的路由：

const routes: Routes = [{
  path: "calendar",
  component: CalendarComponent,
  children: [
    { path: "", redirectTo: "new", pathMatch: "full" },
    { path: "all", component: CalendarListComponent },
    { path: "new", component: CalendarEventComponent },
    { path: ":id", component: CalendarEventComponent }
  ]
}];

在這里定義一個日歷應用，他有一個路由/calendar， 還有三個子路由， /all對應日歷列表頁，new對應新建日歷，:id對應日歷詳情。現在，我們定義一個data對象然后設置一個title屬性來作為每個頁面的標題。

const routes: Routes = [{
  path: "calendar",
  component: CalendarComponent,
  children: [
    { path: "", redirectTo: "new", pathMatch: "full" },
    { path: "all", component: CalendarListComponent, data: { title: "My Calendar" } },
    { path: "new", component: CalendarEventComponent, data: { title: "New Calendar Entry" } },
    { path: ":id", component: CalendarEventComponent, data: { title: "Calendar Entry" } }
  ]
}];

好了，路由定義完了，現在我們看下如何監聽路由變化

Angular路由配置非常簡單，但是路由通過Observables使用起來也非常強大。
我們可以在根組件中全局監聽路由的變化:

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

我們要做的就是在導航結束時獲取到定義的數據然后設置頁面標題，可以檢查 NavigationStart, RoutesRecognized, NavigationEnd 哪種事件是我們需要的方式，理想情況下NavigationEnd，我們可以這么做：

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) { // 當導航成功結束時執行
      console.log("NavigationEnd:", event);
    }
  });

這樣我們就可以在導航成功結束時做一些邏輯了，因為Angular路由器是reactive響應式的，所以我們可以使用 RxJS 實現更多的邏輯，我們來導入以下操作符：

import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";
import "rxjs/add/operator/mergeMap";

現在我們已經添加了 filter，map 和 mergeMap 三個操作符，我們可以過濾出導航結束的事件：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe((event) => {
    console.log("NavigationEnd:", event);
  });

其次，因為我們已經注入了Router類，我們可以使用 routerState 來獲取路由狀態樹得到最后一個導航成功的路由：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.router.routerState.root)
  .subscribe((event) => {
    console.log("NavigationEnd:", event);
  });

然而，一個更好的方式就是使用 ActivatedRoute 來代替 routerState.root, 我們可以將其ActivatedRoute注入類中：

import { Router, NavigationEnd, ActivatedRoute } from "@angular/router";

@Component({...})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title
  ) {}
  ngOnInit() {
    // our code is in here
  }
}

注入之后我們再來優化下：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.activatedRoute)
  .subscribe((event) => {
    console.log("NavigationEnd:", event);
  });

我們使用 map 轉換了我們觀察到的內容，返回一個新的對象 this.activatedRoute 在 stream 流中繼續執行。 我們使用 filter(過濾出導航成功結束) 和 map(返回我們的路由狀態樹) 成功地返回我們想要的事件類型 NavigationEnd。

接下來是最有意思的部分，我們將創建一個while循環遍歷狀態樹得到最后激活的 route，然后將其作為結果返回到流中：

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.activatedRoute)
  .map(route => {
    while (route.firstChild) route = route.firstChild;
    return route;
  })
  .subscribe((event) => {
    console.log("NavigationEnd:", event);
  });

接下來我們可以通過路由配置的屬性來獲取相應的頁面標題。然后，我們還需要另外兩個運算符：

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")  // 過濾出未命名的outlet，
  .mergeMap(route => route.data)                // 獲取路由配置數據
  .subscribe((event) => {
    console.log("NavigationEnd:", event);
  });

現在我們 titleService 只需要實現：

.subscribe((event) => this.titleService.setTitle(event["title"]));

下面看一下最終代碼：

import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";
import "rxjs/add/operator/mergeMap";

import { Component, OnInit } from "@angular/core";
import { Router, NavigationEnd, ActivatedRoute } from "@angular/router";
import { Title } from "@angular/platform-browser";

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

本文翻譯自dynamic-page-titles-angular-2-router-events, 本人水平有限，如果有翻譯不好的地方歡迎大家聯系我