Angular带路径变量路由动态切换子组件不重载问题

核心原因 #

Angular路由默认复用同一组件实例，当仅路由参数（如:year）变化时，组件不会销毁重建，因此ngOnInit仅执行一次，也无法触发路由切换动画。

方案一：订阅路由参数变化，触发数据更新（无需重载组件） #

这是轻量化的常规方案，无需修改路由复用策略，直接在子组件中监听参数变化，每次参数更新时重新执行接口请求和初始化逻辑：

修改ChildComponent代码：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnDestroy {
  private year: any;
  private paramsSubscription!: Subscription;

  constructor(private readonly activatedRoute: ActivatedRoute) {
  }

  public value = {hello: "world"}

  ngOnInit(): void {
    // 订阅参数变化，每次参数更新都会执行回调
    this.paramsSubscription = this.activatedRoute.paramMap.subscribe(paramMap => {
      this.year = paramMap.get('year');
      // 每次参数变化时重新执行初始化逻辑
      this.initData();
    });
  }

  private initData(): void {
    console.log("Child initialized with year:", this.year);
    // 执行接口请求
    // this.httpClient.get(`/api/data/${this.year}`).subscribe(...);
    
    // 模拟数据更新
    this.value = {hello: `Data for ${this.year}`};
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.paramsSubscription.unsubscribe();
  }
}

方案二：自定义路由复用策略，强制子路由参数变化时重建组件 #

如果需要组件完全重载（销毁重建），可自定义路由复用策略，针对/years/:year路由禁止复用，避免全局修改导致的异常：

1. 创建自定义复用策略类：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 仅路由路径和参数完全相同时才复用，参数变化时强制重建组件
    return future.routeConfig === curr.routeConfig && 
           JSON.stringify(future.params) === JSON.stringify(curr.params);
  }
}

2. 在AppModule中提供该策略：

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  // ... 其他模块配置
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule { }

该方案会让/years/:year路由参数变化时，子组件完全销毁重建，ngOnInit重新执行，同时触发路由切换动画。

完善路由切换动画逻辑 #

要实现根据年份切换方向（左滑/右滑），需在父组件中记录上一个年份，对比当前年份返回对应动画状态：

修改ParentComponent代码：

// ... 其他代码
export class ParentComponent {
  public years = [2021,2022,2023,2024,2025,2026,2027,2028,2029,2030,2031];
  private previousYear: number | null = null;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
    // 初始化时获取当前年份
    this.activatedRoute.firstChild?.paramMap.subscribe(paramMap => {
      const currentYear = parseInt(paramMap.get('year') || '0');
      this.previousYear = currentYear;
    });
  }

  public prepareRoute(routerOutlet: RouterOutlet) {
    if (!routerOutlet?.activatedRoute) return '';
    const currentYear = parseInt(routerOutlet.activatedRoute.snapshot.paramMap.get('year') || '0');
    let animationState = '';
    
    if (this.previousYear !== null) {
      animationState = currentYear > this.previousYear ? 'isRight' : 'isLeft';
    }
    this.previousYear = currentYear;
    return animationState;
  }

  createYear(year: number) {
    this.router.navigateByUrl(`/years/${year}`);
  }
}

点击年份按钮时，会根据当前年份与上一年份的大小，返回isRight或isLeft状态，触发对应滑动动画。

方案对比 #

• 方案一：无需修改路由策略，性能更优，适合仅需更新数据的场景。
• 方案二：组件完全重建，适合必须重置内部状态的场景，存在一定性能开销。

可根据实际需求选择对应方案。

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