在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项目中就可以根据路由动态更改页面标题了。