Angular 4+：如何基于路由动态更新导航菜单标题

Great question! You absolutely can avoid writing OnInit logic in every component by leveraging Angular's router events and the route data you've already started defining. Here's how to implement this cleanly, plus a few extra suggestions for your early-stage project:

核心方案：路由事件自动同步标题 #

Since you've already added data: { title: '...' } to your route configurations, we just need to listen for route changes and extract that title automatically to update your NavigationService.

Option 1: Handle routing in AppComponent #

Inject the router, activated route, and your NavigationService into AppComponent, then subscribe to router events to update the title on navigation completion:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private navigationService: NavigationService
  ) {}

  ngOnInit() {
    this.router.events.pipe(
      // Only react to the final navigation event
      filter(event => event instanceof NavigationEnd),
      // Extract the deepest route's title (handles nested routes)
      map(() => {
        let currentRoute = this.activatedRoute.firstChild;
        let pageTitle = 'Page Title'; // Default fallback title

        while (currentRoute) {
          if (currentRoute.snapshot.data['title']) {
            pageTitle = currentRoute.snapshot.data['title'];
          }
          currentRoute = currentRoute.firstChild;
        }

        return pageTitle;
      })
    ).subscribe(title => {
      this.navigationService.changeTitle(title);
    });
  }
}

Option 2: Encapsulate logic in NavigationService (cleaner approach) #

For better separation of concerns, move the routing logic directly into your NavigationService so AppComponent stays focused on its main role:

// navigation.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { Title } from '@angular/platform-browser'; // Optional, for browser tab title

@Injectable()
export class NavigationService {
  private titleSource = new BehaviorSubject<string>("Page Title");
  currentTitle = this.titleSource.asObservable();

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title // Optional
  ) {
    // Automatically update title on route change
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.getDeepestRouteTitle())
    ).subscribe(title => {
      this.changeTitle(title);
      this.titleService.setTitle(title); // Optional: Update browser tab title
    });
  }

  private getDeepestRouteTitle(): string {
    let currentRoute = this.activatedRoute.firstChild;
    let pageTitle = 'Page Title';

    while (currentRoute) {
      if (currentRoute.snapshot.data['title']) {
        pageTitle = currentRoute.snapshot.data['title'];
      }
      currentRoute = currentRoute.firstChild;
    }

    return pageTitle;
  }

  changeTitle(title: string) {
    this.titleSource.next(title);
  }
}

With this setup, you won't need to add any title-related code to your child components at all—just keep defining the title property in your route data as you add new modules/routes.

Extra Optimization Suggestions #

1. Add child route titles: If you want more granular control (e.g., "Settings - Profile" when on the profile page), add data: { title: 'Profile' } to child routes and modify the getDeepestRouteTitle method to build a breadcrumb-style title:

   private getDeepestRouteTitle(): string {
     let currentRoute = this.activatedRoute.firstChild;
     const titleParts: string[] = [];
   
     while (currentRoute) {
       if (currentRoute.snapshot.data['title']) {
         titleParts.unshift(currentRoute.snapshot.data['title']);
       }
       currentRoute = currentRoute.firstChild;
     }
   
     return titleParts.length ? titleParts.join(' - ') : 'Page Title';
   }
   

2. Use a default title constant: Define a constant like DEFAULT_PAGE_TITLE = 'My Dashboard' in a shared file to keep fallback titles consistent.
3. Combine with Angular's Title service: As shown in Option 2, updating the browser tab title alongside your app's navigation title improves user experience.

Advanced: Dynamic Titles (If You Need Them Later) #

If you ever need dynamic titles (e.g., including a user's name or dynamic content), use an Angular route resolver to fetch data before the route activates, then store the title in the resolved data. Your existing routing logic will automatically pick it up from the route snapshot.

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