Angular同路由仅参数变化页面不刷新，如何全局统一处理？

Angular默认对相同路径不同参数的导航，不会销毁重建已渲染的组件，因此组件初始化钩子ngOnInit仅会触发一次，不会重新拉取新参数对应的数据。

以下方案均无需逐个修改40+模块的业务组件，可实现全局/批量生效。

方案1：全局配置路由规则（推荐，改造成本最低） #

适合数据请求统一写在路由Resolver守卫中的项目，仅需修改2处配置即可全量生效，业务组件零修改：

1. 在项目RouterModule.forRoot()的导入位置（通常为app-routing.module.ts），开启同路径导航重载配置：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      onSameUrlNavigation: 'reload' // 开启同路径导航触发重载逻辑
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 给需要响应参数变化的路由项添加runGuardsAndResolvers配置，指定参数变化时重新执行Resolver拉取数据：

const routes: Routes = [
  {
    path: 'payment/detail/:id',
    component: PaymentDetailComponent,
    resolve: { detail: PaymentDetailResolver }, // 原有Resolver配置不变
    // 新增配置：路由params或queryParams变化时，重新触发守卫和Resolver
    runGuardsAndResolvers: 'paramsOrQueryParamsChange'
  },
  // 其余需要响应参数变化的路由统一加该配置即可
]

方案2：封装公共基类组件 #

适合数据请求逻辑写在组件内部的项目，仅需编写一次监听逻辑，需要的业务组件继承即可：

1. 封装公共路由监听基类：

// base-route.component.ts 公共基类文件
import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
import { Component, OnDestroy } from '@angular/core';
import { filter, Subject, takeUntil } from 'rxjs';

@Component({ template: '' })
export abstract class BaseRouteComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(protected router: Router, protected route: ActivatedRoute) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.refreshData(this.route.snapshot.params);
    });
  }

  // 子类实现该方法执行数据刷新逻辑
  protected abstract refreshData(params: Record<string, any>): void;

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

2. 业务组件继承基类，仅需实现数据刷新方法即可：

// 业务组件示例
@Component({
  selector: 'app-payment-detail',
  templateUrl: './payment-detail.component.html'
})
export class PaymentDetailComponent extends BaseRouteComponent {
  constructor(
    router: Router,
    route: ActivatedRoute,
    private paymentService: PaymentService
  ) {
    super(router, route);
  }

  protected override refreshData(params: Record<string, any>): void {
    // 原有数据请求逻辑移到此处即可
    this.paymentService.getDetail(params['id']).subscribe(res => {
      // 渲染数据
    });
  }
}

方案3：全局服务统一分发路由参数 #

适合已接入全局状态管理的项目，在根层订阅一次路由变化，所有组件订阅全局参数即可自动刷新：

// global.service.ts 全局服务
import { Injectable } from '@angular/core';
import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
import { filter, BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class GlobalRouteService {
  public routeParams$ = new BehaviorSubject<Record<string, any>>({});

  constructor(private router: Router, private route: ActivatedRoute) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 递归获取当前路由最深层的params
      let activeRoute = this.route.root;
      while (activeRoute.firstChild) {
        activeRoute = activeRoute.firstChild;
      }
      this.routeParams$.next(activeRoute.snapshot.params);
    });
  }
}

业务组件订阅全局参数即可：

export class PaymentDetailComponent {
  constructor(private globalRouteService: GlobalRouteService, private paymentService: PaymentService) {
    this.globalRouteService.routeParams$.subscribe(params => {
      if (params['id']) {
        this.paymentService.getDetail(params['id']).subscribe(res => {
          // 渲染数据
        });
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者Mr-Programer