Angular 14同类型子路由切换时组件不更新问题求助

Angular 路由默认会复用同类型组件实例，当你从person/1切换到person/2时，URL参数变化但PersonComponent不会被销毁重建，因此组件初始化阶段（比如ngOnInit）的代码不会再次执行，导致组件内容没有更新。

方法1：监听路由参数变化（推荐） #

在BuildingComponent和PersonComponent中，通过ActivatedRoute订阅参数变化，触发数据重新加载：

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

export class PersonComponent implements OnInit, OnDestroy {
  private paramSubscription!: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅paramMap变化
    this.paramSubscription = this.route.paramMap.subscribe(params => {
      const uuid = params.get('uuid');
      if (uuid) {
        // 调用数据加载方法
        this.loadPersonData(uuid);
      }
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅避免内存泄漏
    this.paramSubscription.unsubscribe();
  }

  private loadPersonData(uuid: string): void {
    // 这里编写获取人员详情的逻辑
  }
}

如果使用RxJS的takeUntil操作符管理订阅，也可以避免手动取消订阅：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class PersonComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.pipe(takeUntil(this.destroy$))
      .subscribe(params => {
        const uuid = params.get('uuid');
        if (uuid) {
          this.loadPersonData(uuid);
        }
      });
  }

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

方法2：强制组件销毁重建 #

修改路由配置，添加runGuardsAndResolvers: 'always'，让Angular在参数变化时重新创建组件实例：

const routes: Routes = [
  { path: '', component: MainComponent, canActivate: [AuthGuard], 
    children: [
      { 
        path: 'building/:uuid', 
        component: BuildingComponent,
        runGuardsAndResolvers: 'always'
      },
      { 
        path: 'person/:uuid', 
        component: PersonComponent,
        runGuardsAndResolvers: 'always'
      },
    ]
  },
];

这种方法会触发组件的ngOnDestroy和ngOnInit重新执行，但相比参数订阅，组件重建会带来额外性能开销，因此更推荐第一种方法。

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