Title Service

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

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

匯入之後，我們在元件的建構函式中注入他們

@Component({
  selector: 'app-root',
  templateUrl: `
    <div>
      Hello world!
    </div>
  `
 

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

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

Routing events

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，<router-outlet>
  .mergeMap(route => route.data)                // 獲取路由配置資料
  .subscribe((event) => {
    console.log('NavigationEnd:', event);
  });

現在我們 titleService 只需要實現：

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