Angular同组件不同路由参数跳转时页面不刷新如何解决？

问题原因 #

Angular路由默认在导航到同一组件实例时，不会触发组件的销毁与重建流程，因此constructor、ngOnInit等生命周期钩子仅会在组件首次加载时执行一次。你使用route.snapshot.params获取参数的方式只能拿到组件初始化时的参数值，新增onSameUrlNavigation: 'reload'配置后未生效是因为缺少配套的路由规则配置。

另外你提供的TS代码constructor参数中存在多余的private语法错误，可先删除避免编译报错。 #

推荐解决方案：订阅路由参数变更（最优） #

该方案无需销毁重建组件，性能开销最低，是Angular官方推荐的处理方式，无需额外修改路由配置
修改组件TS代码如下：

import { Subscription } from 'rxjs';

value: any;
// 存储订阅实例用于销毁
private paramSub: Subscription;

constructor(private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
  // 订阅路由参数变化，每次参数更新都会触发回调
  this.paramSub = this.route.params.subscribe(params => {
    this.value = params.id;
    // 在这里调用你需要重新执行的所有数据加载、初始化逻辑
    this.loadPageData(this.value);
  });
}

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

// 你的页面业务逻辑统一封装在这里
loadPageData(id: string) {
  // 数据请求、状态初始化等逻辑都放在此处
}

goToPage(value: any) {
  this.router.navigate(['/test', value]);
}

可选方案：强制组件执行全量初始化流程 #

如果你确实需要触发所有原始生命周期逻辑，不想重构现有代码，可按以下步骤配置：

1. 修改路由模块的RouterModule配置：

RouterModule.forRoot(routes, {
  onSameUrlNavigation: 'reload'
})

2. 修改路由定义，新增runGuardsAndResolvers配置：

const routes: Routes = [
  {
    path: 'test',
    children: [
      {
        path: ':id',
        component: TestComponent,
        // 配置始终运行路由守卫和解析器
        runGuardsAndResolvers: 'always'
      },
      { path: '**', redirectTo: '', pathMatch: 'full' }
    ]
  },
];

3. 组件内监听路由完成事件触发初始化：

import { filter } from 'rxjs/operators';
import { NavigationEnd } from '@angular/router';

value: any;

constructor(private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    this.value = this.route.snapshot.params.id;
    // 执行所有原有的初始化逻辑
    this.loadPageData(this.value);
  });
}

loadPageData(id: string) {
  // 原有业务逻辑
}

goToPage(value: any) {
  this.router.navigate(['/test', value]);
}

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