Angular 16：如何将组件动态数据传递到路由模块设置页面标题？

下面给你两种可靠的实现方案，根据你的应用复杂度选择：

方案一：直接通过路由Data更新标题（轻量方案） #

适合简单场景，无需额外服务，直接复用Angular路由系统。

1. 配置路由默认标题 #

在app-routing.module.ts中给分类电影路由设置默认标题：

const routes: Routes = [
  // 其他路由
  {
    path: 'movies/genre/:id',
    component: MoviesByGenreComponent,
    data: { title: '加载中...' } // 加载时的默认标题
  }
];

2. 在分类组件中更新路由Data #

拿到TMDB返回的genreName后，更新当前路由的data：

// movies-by-genre.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { TmdbService } from '../services/tmdb.service';

@Component({
  selector: 'app-movies-by-genre',
  templateUrl: './movies-by-genre.component.html',
  styleUrls: ['./movies-by-genre.component.css']
})
export class MoviesByGenreComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private tmdbService: TmdbService
  ) {}

  ngOnInit(): void {
    const genreId = this.route.snapshot.paramMap.get('id');
    if (!genreId) return;

    this.tmdbService.getGenreNameById(genreId).subscribe({
      next: (genreName) => {
        // 更新路由配置的data（全局生效）
        const targetRoute = this.router.config.find(r => r.path === 'movies/genre/:id');
        if (targetRoute) {
          targetRoute.data = { ...targetRoute.data, title: genreName };
        }
        // 通过ActivatedRoute的data流推送新值（仅当前路由快照生效）
        this.route.data.next({ ...this.route.snapshot.data, title: genreName });
      },
      error: () => {
        // 请求失败时设置 fallback 标题
        this.route.data.next({ ...this.route.snapshot.data, title: '电影分类' });
      }
    });
  }
}

3. 在AppComponent中监听路由变化获取标题 #

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  pageTitle = '';

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      // 只监听导航完成事件
      filter(event => event instanceof NavigationEnd),
      // 递归获取当前激活的子路由
      map(() => {
        let activeRoute = this.router.routerState.root.firstChild;
        while (activeRoute?.firstChild) {
          activeRoute = activeRoute.firstChild;
        }
        return activeRoute?.data || {};
      })
    ).subscribe(data => {
      this.pageTitle = data['title'] || '我的电影APP';
    });
  }
}

4. 在模板中展示标题 #

<!-- app.component.html -->
<header>
  <h2>{{ pageTitle }}</h2>
</header>
<router-outlet></router-outlet>

方案二：全局标题服务（解耦方案） #

适合大型应用，多个组件需要修改标题的场景，解耦路由与标题逻辑。

1. 创建全局TitleService #

// services/title.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TitleService {
  private _currentTitle = new BehaviorSubject<string>('我的电影APP');
  currentTitle$: Observable<string> = this._currentTitle.asObservable();

  setTitle(title: string): void {
    this._currentTitle.next(title);
  }
}

2. 在分类组件中调用服务设置标题 #

// movies-by-genre.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TmdbService } from '../services/tmdb.service';
import { TitleService } from '../services/title.service';

@Component({
  selector: 'app-movies-by-genre',
  templateUrl: './movies-by-genre.component.html',
  styleUrls: ['./movies-by-genre.component.css']
})
export class MoviesByGenreComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private tmdbService: TmdbService,
    private titleService: TitleService
  ) {}

  ngOnInit(): void {
    const genreId = this.route.snapshot.paramMap.get('id');
    if (!genreId) return;

    this.tmdbService.getGenreNameById(genreId).subscribe({
      next: (genreName) => this.titleService.setTitle(genreName),
      error: () => this.titleService.setTitle('电影分类')
    });
  }
}

3. 在AppComponent中订阅标题变化 #

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { TitleService } from './services/title.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  pageTitle = '';

  constructor(private titleService: TitleService) {}

  ngOnInit(): void {
    this.titleService.currentTitle$.subscribe(title => {
      this.pageTitle = title;
    });
  }
}

4. 模板展示标题（同方案一） #

方案对比 #

• 方案一：轻量，依赖路由系统，适合简单页面场景；但修改路由配置的data会全局生效，需注意路由唯一性。
• 方案二：解耦性强，适合多组件修改标题的场景；可结合路由默认data初始化标题（比如在AppComponent中先读取路由data再订阅服务）。

内容的提问来源于stack exchange，提问作者Razvan Zamfir