Angular路由问题：URL更新但页面未刷新

以下是针对该问题的几种常见解决方案：

• 监听queryParams变化
  Angular默认会复用同路由对应的组件，当仅queryParams变化时，组件不会重新初始化。你可以在目标组件的ngOnInit中订阅路由参数的变化，触发数据更新逻辑：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const itemId = params['id'];
      // 这里执行根据itemId重新加载页面数据的代码
    });
  }
  

• 配置路由强制刷新
  在路由模块中给目标路由添加runGuardsAndResolvers: 'always'配置，强制每次导航都触发守卫和解析器，确保组件重新获取数据：

  const routes: Routes = [
    {
      path: 'list/contentpage',
      component: ContentPageComponent,
      runGuardsAndResolvers: 'always'
    }
  ];
  

• 处理变更检测问题
  如果目标组件使用了ChangeDetectionStrategy.OnPush策略，数据更新后可能不会自动触发视图刷新。可以注入ChangeDetectorRef手动标记需要检测变更：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 在数据更新完成后调用
  this.cdr.markForCheck();
  

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