在Angular中如何根據路由更改頁面標題

在Angular中，可以通過Angular的Router模塊來動態更改頁面標題。具體步驟如下：

1. 在app.module.ts中導入RouterModule模塊：

import { RouterModule, Routes } from '@angular/router';

2. 在RouterModule的routes中定義路由，并為每個路由定義一個屬性title，用于存儲頁面的標題信息，例如：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, data: { title: 'Home' } },
  { path: 'about', component: AboutComponent, data: { title: 'About Us' } },
  // other routes...
];

3. 在app.component.ts中訂閱Router事件，監控路由變化并動態更改頁面標題：

import { Router, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';

export class AppComponent {
  constructor(private router: Router, private titleService: Title) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.router.routerState.root),
      map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
      }),
      filter(route => route.outlet === 'primary'),
      mergeMap(route => route.data)
    ).subscribe((data: any) => {
      this.titleService.setTitle(data.title);
    });
  }
}

通過以上步驟，在Angular項目中就可以根據路由動態更改頁面標題了。