如何自动刷新Angular组件

Posted 2023-02-19

【中文标题】如何自动刷新Angular组件

【英文标题】：How to autorefresh Angular component

【发布时间】：2022-01-02 23:29:11

【问题描述】：

这里：https://stackblitz.com/edit/angular-ivy-byvfjy?file=src/app/app.module.ts

当我去“concursos/buscar”时：https://angular-ivy-byvfjy.stackblitz.io/concursos/buscar

我看到 5 条记录具有字段 Estudiar=null

现在，每次单击一行时，它的颜色都会发生变化，当颜色为绿色时，表示 Estudiar="SI"，当颜色为红色时，表示 Estudiar="NO"

选择后，您希望单击 Guardar 按钮并通过 Web API 调用在数据库中执行更新，当这些更新完成后，我想重新加载此组件，以便 Estudiar = null 字段的记录消失但是

this.router.navigate(['concursos/buscar'])

不要将我重定向回组件

this.dataService.updateConcursosAEstudiar(concursos)
  .subscribe(data=>
      console.log('concursos actualizados correctamente')
      this.router.navigate(['concursos/buscar'])
    ),
    err=>console.log(err)

如果我看到绿色消失了，我手动刷新页面

有什么想法吗？

谢谢

【问题讨论】：

而不是刷新页面为什么不调用 API 并刷新检索到的数据？另外，您是否尝试过 this.router.navigate([...], relativeTo: this.parent ) ？父母是：私人父母：ActivatedRoute;

【参考方案1】：

你可以使用

location.reload();

用于重新加载当前页面。 它会重新加载 ngOnInit 女巫，我认为这是您想要实现的目标，但请记住，它会显示浏览器刷新的动画。

【讨论】：

感谢@ilay Tertman，这很好用，但正如你所说，我想避免喝茶。