如何实现页面无限次重载？解决当前代码仅单次重载的问题

问题原因 #

当前代码通过修改routeReuseStrategy.shouldReuseRoute强制不重用路由，但当导航到同一路由且queryParams值未变化时，Angular不会触发组件的重新初始化，导致仅能重载一次。

解决方案1：添加唯一参数强制触发重载 #

在每次导航时添加时间戳作为额外参数，确保每次路由请求的参数唯一，Angular会识别为新的路由操作，从而重新加载组件：

// customer.component.ts
constructor(private router: Router ) {
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

pageReload(){
  this.router.navigate(['/customer'], { 
    queryParams: { 
      namevar: this.namevar,
      _t: Date.now() // 添加时间戳，确保每次请求参数唯一
    } 
  });
}

额外的_t参数不会影响业务逻辑，组件无需额外处理。

解决方案2：监听参数变化手动刷新数据 #

如果不想添加额外参数，可以在组件内监听路由参数变化，手动执行数据刷新逻辑，无需依赖组件重新初始化：

// customer.component.ts
import { ActivatedRoute } from '@angular/router';

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

ngOnInit() {
  // 订阅queryParams变化，触发数据刷新
  this.route.queryParams.subscribe(params => {
    this.loadCustomerData(params.namevar);
  });
}

// 封装数据加载逻辑
loadCustomerData(name: string) {
  // 这里写实际的页面数据刷新代码，比如请求接口、更新视图等
}

pageReload(){
  // 先手动触发数据刷新
  this.loadCustomerData(this.namevar);
  // 可选：更新URL中的参数（即使值相同，也会触发路由事件）
  this.router.navigate(['/customer'], { 
    queryParams: { namevar: this.namevar },
    queryParamsHandling: 'merge'
  });
}

解决方案3：路由配置强制触发守卫与解析器 #

在路由配置中设置runGuardsAndResolvers: 'always'，确保每次导航到该路由时都会运行守卫和解析器，从而重新加载数据：

// 路由配置文件（如app-routing.module.ts）
const routes: Routes = [
  {
    path: 'customer',
    component: CustomerComponent,
    runGuardsAndResolvers: 'always' // 每次导航都执行守卫和解析器
  }
];

结合组件内的参数订阅或解析器加载数据，即可实现每次点击刷新都重新获取数据。

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