Angular 15.0.4：路由嵌套子组件返回父组件时的页面标题设置问题

问题根源 #

你的场景中，模态框通过routerLink跳转实现页面级打开/关闭，导致父页面的标题在关闭模态框后无法自动恢复。原因是：父组件的初始化钩子（如ngOnInit）不会在从模态框返回时重新触发，而模态框组件设置的标题会覆盖父页面标题，且模态框可能从多个父页面打开，无法硬编码返回后的标题。

解决方案：全局路由事件监听+路由配置标记 #

通过在全局监听路由导航事件，结合路由配置中的标题标识，自动恢复父页面标题，无需在每个模态框或父页面单独处理。

步骤1：配置路由元数据 #

在路由配置中，为每个页面（包括父页面和模态框）添加data.titleKey字段，对应多语言标题的key：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstParentComponent } from './first-parent/first-parent.component';
import { ChildModalComponent } from './child-modal/child-modal.component';
import { SecondParentComponent } from './second-parent/second-parent.component';

const routes: Routes = [
  { 
    path: 'first-parent', 
    component: FirstParentComponent, 
    data: { titleKey: 'firstParent' } // 多语言标题key
  },
  { 
    path: 'child-modal', 
    component: ChildModalComponent, 
    data: { titleKey: 'childModal' } 
  },
  { 
    path: 'second-parent', 
    component: SecondParentComponent, 
    data: { titleKey: 'secondParent' } 
  },
  { path: '', redirectTo: '/first-parent', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：全局监听路由并更新标题 #

在AppComponent中监听路由导航事件，记录上一页的标题标识，在返回父页面时自动设置对应标题：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core'; // 假设使用ngx-translate做多语言

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private lastNonModalTitleKey: string | null = null;
  private isInModalRoute = false;

  constructor(
    private router: Router,
    private titleService: Title,
    private translateService: TranslateService,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    // 初始化页面标题
    const initialTitleKey = this.getTitleKeyFromRoute(this.activatedRoute);
    this.updatePageTitle(initialTitleKey);

    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const currentTitleKey = this.getTitleKeyFromRoute(this.router.routerState.root);
        const currentRouteIsModal = currentTitleKey === 'childModal'; // 根据实际模态框路由标识判断

        if (currentRouteIsModal) {
          // 进入模态框时，记录之前的非模态页面标题
          if (!this.isInModalRoute) {
            this.lastNonModalTitleKey = this.getPreviousRouteTitleKey();
          }
          this.isInModalRoute = true;
        } else {
          // 返回非模态页面时，恢复之前的标题（或直接用当前路由的标题）
          const targetTitleKey = currentTitleKey || this.lastNonModalTitleKey || '';
          this.updatePageTitle(targetTitleKey);
          this.isInModalRoute = false;
          this.lastNonModalTitleKey = null;
        }
      }
    });
  }

  // 递归获取当前路由的titleKey
  private getTitleKeyFromRoute(route: ActivatedRoute): string {
    let currentRoute = route;
    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }
    return currentRoute.snapshot.data['titleKey'] || '';
  }

  // 获取上一个路由的titleKey
  private getPreviousRouteTitleKey(): string {
    const prevNavigation = this.router.getCurrentNavigation()?.previousNavigation;
    if (!prevNavigation) return '';
    return this.getTitleKeyFromRoute(prevNavigation.initialState.root);
  }

  // 更新页面标题（多语言翻译）
  private updatePageTitle(titleKey: string): void {
    this.translateService.get(titleKey).subscribe(translatedTitle => {
      this.titleService.setTitle(translatedTitle);
    });
  }
}

可选优化：通用模态框路由标识 #

如果有多个模态框路由，可以统一给模态框路由添加data.isModal: true的标记，这样判断逻辑更通用：

// 路由配置示例
{ 
  path: 'child-modal', 
  component: ChildModalComponent, 
  data: { titleKey: 'childModal', isModal: true } 
}

// 在AppComponent中修改判断逻辑
const currentRouteIsModal = !!currentRoute.snapshot.data['isModal'];

另一种轻量方案：路由State传递标题 #

如果不想全局监听，可以在打开模态框时通过路由State传递父页面标题，关闭时取出设置：

1. 打开模态框的链接：

<!-- 父页面组件中 -->
<a 
  [routerLink]="['/child-modal']" 
  [state]="{ parentTitle: translatedParentTitle }"
>打开模态框</a>

2. 模态框关闭时恢复标题：

// child-modal.component.ts
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-child-modal',
  templateUrl: './child-modal.component.html'
})
export class ChildModalComponent {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title
  ) {}

  closeModal(): void {
    // 从路由State中获取父页面标题
    const parentTitle = this.router.getCurrentNavigation()?.extras.state?.['parentTitle'];
    if (parentTitle) {
      this.titleService.setTitle(parentTitle);
    }
    // 返回上一页
    this.router.navigate(['../'], { relativeTo: this.activatedRoute });
  }
}

这种方案适合模态框打开场景较少的情况，全局监听方案更适合大量模态框的项目。

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