Angular 9路由中如何复用ResultsComponent实例实现博客分页？

嘿，这个场景我之前也踩过坑！你现在遇到的问题是Angular默认会在路由路径变化时销毁并重建组件，哪怕两个路由指向同一个组件。不过咱们有两种靠谱的方案来解决这个问题，既能保留你想要的路由结构，也能实现组件实例复用：

方法一：自定义RouteReuseStrategy（复杂场景首选） #

Angular提供了RouteReuseStrategy接口，允许我们自定义路由组件的复用规则。你可以创建一个专属策略，告诉Angular只要是指向ResultsComponent的路由，就复用已有的实例，而非重建。

步骤1：编写自定义复用策略类 #

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
import { ResultsComponent } from './results/results.component';

export class ReuseResultsStrategy implements RouteReuseStrategy {
  // 存储已缓存的组件实例
  private storedHandles: Map<string, DetachedRouteHandle> = new Map();

  // 判断是否复用当前路由（默认逻辑：路由配置相同则复用）
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  // 判断当前路由是否需要缓存
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 仅对ResultsComponent开启缓存
    return route.routeConfig?.component === ResultsComponent;
  }

  // 缓存组件实例
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    // 生成忽略page参数的唯一key，确保根路径和/page/:page共享同一个缓存
    const key = this.generateRouteKey(route);
    this.storedHandles.set(key, handle);
  }

  // 判断是否恢复缓存的组件
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const key = this.generateRouteKey(route);
    return this.storedHandles.has(key);
  }

  // 获取缓存的组件实例
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const key = this.generateRouteKey(route);
    return this.storedHandles.get(key) || null;
  }

  // 生成路由唯一标识：父路径+组件名称，忽略动态参数
  private generateRouteKey(route: ActivatedRouteSnapshot): string {
    const parentPath = route.parent?.url.join('/') || '';
    return `${parentPath}-ResultsComponent`;
  }
}

步骤2：在模块中注册策略 #

在AppModule的providers数组中注入自定义策略：

import { RouteReuseStrategy } from '@angular/router';
import { ReuseResultsStrategy } from './reuse-results.strategy';

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

配置完成后，访问/或/page/5都会复用同一个ResultsComponent实例，你只需要在组件内订阅ActivatedRoute.params来监听页码变化，触发数据更新即可。

方法二：改用查询参数（简单场景首选） #

如果不想写复杂的复用策略，可以把分页参数改成查询参数（比如/?page=5）。这样路由路径始终是/，Angular不会重建组件，只会更新查询参数。

步骤1：简化路由配置 #

只保留根路径的路由规则：

const routes: Routes = [
  { path: '', component: PageComponent, children: [
    { path: '', component: ResultsComponent },
  ] },
];

步骤2：在组件中监听查询参数 #

在ResultsComponent内订阅查询参数变化：

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

export class ResultsComponent implements OnInit, OnDestroy {
  private queryParamSub!: Subscription;
  currentPage = 1;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听查询参数变化，更新页码并加载对应数据
    this.queryParamSub = this.route.queryParams.subscribe(params => {
      this.currentPage = +params['page'] || 1;
      this.loadPageData(this.currentPage);
    });
  }

  ngOnDestroy(): void {
    this.queryParamSub.unsubscribe();
  }

  private loadPageData(page: number): void {
    // 你的分页数据加载逻辑
  }
}

步骤3：修改分页导航链接 #

把原来的/page/5改成带查询参数的链接：

<a [routerLink]="['/']" [queryParams]="{ page: 5 }">第5页</a>

这种方法的优势是实现简单，不需要额外写策略类，但URL结构会变成查询参数形式，如果你更在意URL的美观性，方法一更适合你。

额外提醒 #

不管用哪种方案，都要确保组件能正确响应页码变化——别只在ngOnInit里加载一次数据，要在参数更新时重新触发数据加载逻辑。

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