Angular 15：如何从路由组件向app-title传递页面标题？

以下是三种可靠的实现方式，按推荐程度排序：

一、利用路由配置的data字段（最规范） #

这种方式将标题与路由配置绑定，统一管理，无需额外依赖。

1. 修改路由配置
   在app-routing.module.ts中给目标路由添加title数据：

const routes: Routes = [
  { 
    path: 'referrals', 
    component: AppReferralsComponent,
    data: { title: 'This is referrals page' }
  },
  // 其他路由可按需添加title字段
];

2. 在app-title组件中监听路由变化
   通过订阅路由事件，提取当前激活路由的data中的标题：

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

@Component({
  selector: 'app-title',
  template: '<h1>{{pageTitle}}</h1>'
})
export class AppTitleComponent implements OnInit {
  pageTitle = '默认标题';

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => {
        // 嵌套路由时需找到最底层的激活路由
        let activeRoute = this.activatedRoute.firstChild;
        while (activeRoute?.firstChild) {
          activeRoute = activeRoute.firstChild;
        }
        return activeRoute?.snapshot.data['title'] || this.pageTitle;
      })
    ).subscribe(title => {
      this.pageTitle = title;
    });
  }
}

二、通过共享服务动态设置标题（适合动态更新场景） #

如果需要在组件运行过程中随时修改标题，使用共享服务更灵活。

1. 创建标题服务

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TitleService {
  private title$ = new BehaviorSubject<string>('默认标题');
  currentTitle: Observable<string> = this.title$.asObservable();

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

2. 在app-title组件中订阅标题

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

@Component({
  selector: 'app-title',
  template: '<h1>{{pageTitle}}</h1>'
})
export class AppTitleComponent implements OnInit {
  pageTitle = '';

  constructor(private titleService: TitleService) {}

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

3. 在路由组件中调用服务设置标题

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

@Component({
  selector: 'app-referrals',
  templateUrl: './app-referrals.component.html'
})
export class AppReferralsComponent implements OnInit {
  constructor(private titleService: TitleService) {}

  ngOnInit(): void {
    this.titleService.setTitle('This is referrals page');
  }
}

三、结合Angular自带Title服务（同步浏览器标签） #

如果需要同时更新浏览器标签页标题，可以使用Angular提供的Title服务：

// 在路由组件中
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-referrals',
  templateUrl: './app-referrals.component.html'
})
export class AppReferralsComponent implements OnInit {
  constructor(private title: Title) {}

  ngOnInit(): void {
    const pageTitle = 'This is referrals page';
    this.title.setTitle(pageTitle);
  }
}

若要在app-title组件中显示浏览器标题，可直接调用this.title.getTitle()获取。

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