Angular同组件路由跳转时组件重载重复触发ngOnInit问题

你当前将不同层级的分类路径拆分为4条独立的路由配置项，Angular路由在不同独立路由条目之间跳转时，无论两个条目绑定的组件是否为同一个，都会触发路由出口内组件的销毁、重建流程，这就是ngOnInit和ngOnDestroy反复执行的直接原因。
Angular原生支持的同组件路由不重载逻辑，仅生效于同一条路由规则下的参数/查询参数变更场景，跨路由条目跳转必然触发组件实例重建，不需要自定义RouteReuseStrategy即可实现。

1. 合并路由配置为单条规则 #

将原来拆分的4条路由合并为1条，通过可选路径参数匹配0~3级的分类路径，从根源上避免跨路由条目跳转：

const routes: Routes = [
  // 参数后加?标记为可选，单条规则可匹配空路径、1级、2级、3级分类路径
  { path: ":level1?/:level2?/:level3?", component: CategoriesComponent },
];

如果需要严格控制匹配规则、避免和其他路由规则冲突，可以使用自定义URL匹配器实现更精准的层级匹配：

import { UrlSegment, UrlMatchResult, Routes } from '@angular/router';

// 仅匹配0~3个路径段的分类地址
function categoryMatcher(segments: UrlSegment[]): UrlMatchResult | null {
  if (segments.length > 3) return null; // 超过3级路径交给其他路由处理
  const posParams: Record<string, UrlSegment> = {};
  if (segments[0]) posParams.level1 = segments[0];
  if (segments[1]) posParams.level2 = segments[1];
  if (segments[2]) posParams.level3 = segments[2];
  return { consumed: segments, posParams };
}

const routes: Routes = [
  { matcher: categoryMatcher, component: CategoriesComponent }
];

2. 改造组件参数读取逻辑 #

同一路由下参数变更不会触发组件重建，因此不能在ngOnInit中只读取一次路由参数，需要订阅参数流来响应路由变化：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-categories',
  template: `<!-- 原有组件模板内容不变 -->`
})
export class CategoriesComponent implements OnInit, OnDestroy {
  private paramSub: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 首次进入组件、后续路由参数变更时都会触发该回调
    this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
      const level1 = params.get('level1');
      const level2 = params.get('level2');
      const level3 = params.get('level3');
      // 在此处执行分类数据加载、视图更新等逻辑
      this.loadCategoryContent(level1, level2, level3);
    });
  }

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

  private loadCategoryContent(l1?: string, l2?: string, l3?: string) {
    // 原有分类加载逻辑
  }
}

3. 路由链接适配 #

原有模板中的路由链接写法无需额外修改，跳转时会自动更新当前路由的参数，不会触发组件重建。如果需要调整跳转逻辑，注意始终基于当前激活路由做相对导航，不要跳转到其他独立路由条目即可。

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