Angular 15：子组件路由切换时如何重新初始化父组件？

方案1：监听父组件ActivatedRoute的URL变化 #

这是最直接的方案，子路由切换时父组件的ActivatedRoute会感知到URL变化，不会像全局router.events那样容易触发循环。

在request.component.ts中实现：

import { ActivatedRoute } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-request',
  templateUrl: './request.component.html'
})
export class RequestComponent {
  private destroy$ = new Subject<void>();

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听子路由URL变化
    this.route.url.pipe(takeUntil(this.destroy$)).subscribe(urlSegments => {
      const currentStepPath = urlSegments[0]?.path;
      this.loadStepData(currentStepPath);
    });

    // 处理首次加载
    const initialStepPath = this.route.snapshot.url[0]?.path;
    this.loadStepData(initialStepPath);
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  private loadStepData(stepPath: string | undefined): void {
    if (stepPath === 'step1') {
      // 执行step1的数据加载逻辑
      this.loadStep1Data();
    } else if (stepPath === 'step2') {
      // 执行step2的数据加载逻辑
      this.loadStep2Data();
    }
  }

  private loadStep1Data(): void {
    // 你的step1数据请求逻辑
  }

  private loadStep2Data(): void {
    // 你的step2数据请求逻辑
  }
}

方案2：利用路由自定义数据区分步骤 #

在路由配置中给子路由添加标识数据，父组件监听路由数据变化：

1. 路由配置修改：

const routes: Routes = [
  {
    path: 'request',
    component: RequestComponent,
    children: [
      { 
        path: 'step1', 
        component: Step1Component, 
        data: { step: 'step1' } // 添加自定义标识
      },
      { 
        path: 'step2', 
        component: Step2Component, 
        data: { step: 'step2' } 
      }
    ]
  }
];

2. 父组件中监听：

// 替换方案1中的url监听，改用data监听
this.route.data.pipe(takeUntil(this.destroy$)).subscribe(data => {
  const step = data['step'];
  this.loadStepData(step);
});

// 首次加载处理
const initialStep = this.route.snapshot.data['step'];
this.loadStepData(initialStep);

方案3：修复原有router.events的无限循环问题 #

如果不想换方案，可通过过滤当前路由范围解决循环：

import { Router, NavigationEnd } from '@angular/router';
import { takeUntil, filter } from 'rxjs/operators';

// 在ngOnInit中添加
this.router.events.pipe(
  takeUntil(this.destroy$),
  filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
  // 只处理request父路由下的导航
  if (!event.url.includes('/request/')) return;
  
  const currentStep = event.url.split('/').pop();
  this.loadStepData(currentStep);
});

无限循环的核心原因是你在NavigationEnd回调中可能触发了新的路由跳转（比如数据加载失败后的重定向），或者未取消订阅导致重复监听。添加路由范围过滤后，只会处理当前父路由下的切换，不会干扰其他路由操作。

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