如何实现Angular组件数据更新后自动刷新，解决同路由跳转不重载问题

Angular 默认导航到当前已激活的相同路由时，不会触发组件的销毁与重建逻辑，因此你直接调用this.router.navigate(['concursos/buscar'])不会重新拉取数据，页面自然没有变化。可以选择以下任意方案解决：

方案1：直接重新拉取列表数据（最推荐） #

你跳转路由的核心需求是更新列表、过滤掉已标记的记录，不需要动路由逻辑，直接在更新成功的回调里，重新调用你组件初始化时拉取列表数据的方法即可，比如你原本在ngOnInit中执行getEstudiarList()拉取数据，修改代码如下：

this.dataService.updateConcursosAEstudiar(concursos)
  .subscribe(
    data=>{
      console.log('concursos actualizados correctamente')
      // 直接重新拉取列表，替换本地的数据源，视图会自动更新
      this.getEstudiarList()
    },
    err=>console.log(err)
  )

这个方案不需要修改其他配置，只会局部刷新数据，性能最优。

方案2：配置路由强制重新加载当前组件 #

如果你确实需要让组件完整走一遍初始化生命周期（比如有其他绑定在初始化阶段的逻辑要执行），可以修改路由配置：

1. 首先在根路由配置中开启相同路由重加载开关：

// app-routing.module.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload' // 开启相同路由重加载
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 给对应页面路由加runGuardsAndResolvers配置：

const routes: Routes = [
  {
    path: 'concursos/buscar',
    component: 你的业务组件名,
    runGuardsAndResolvers: 'always'
  },
  // 其他路由配置
]

3. 跳转时附加随机参数触发重加载：

this.router.navigate(['concursos/buscar'], {
  queryParams: {
    refresh: Date.now() // 附加时间戳参数，确保每次跳转参数不一致，触发重加载
  }
})

方案3：强制刷新整个页面（不推荐） #

如果不需要保留页面其他状态，也可以直接调用原生方法刷新整个页面，性能最差，不推荐：

window.location.reload()

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