重新加载路由不会刷新 api 调用答案

【问题标题】：Reload route does not refresh the api calls重新加载路由不会刷新 api 调用
【发布时间】：2020-05-08 12:23:15
【问题描述】：

我正在尝试在 Angular 7 中构建一个功能，在其中我单击刷新按钮并重新加载路由（而不是重新加载页面）并刷新数据（我相信这将意味着再次进行所有 api 调用）。

刷新点击是在一个通用组件中实现的，它在应用程序的所有地方都使用。在我使用过的通用组件的构造函数中：

this.someVariable = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    this.urlToRefresh = event.urlAfterRedirects;
  }
});

然后单击刷新我调用 this.router.navigateByUrl(this.urlToRefresh);

这似乎确实重新加载了路由，但它没有重新加载 api，因此数据没有刷新。有什么问题吗，或者有没有其他方法可以在不刷新页面的情况下实现这一点。

【问题讨论】：

这里没有足够的信息让任何人有效地帮助您。我们需要查看处理数据获取的代码。但是，我建议在这里查看“生命周期挂钩”：angular.io/guide/lifecycle-hooks

标签： javascript angular angular2-routing

【解决方案1】：

假设您有 2 个函数，每个函数都在进行 api 调用。假设两个函数名称为functionOneApi() 和functionTwoApi()。

并创建一个单独的函数，您必须再次调用这两个函数意味着再次调用 api。

functionCalls(){
   functionOneApi();
   functionTwoApi()
}

【讨论】：

感谢您的帮助 Fahad 但我认为 window.location.reload();将重新加载页面。我不想重新加载页面，只是想用新数据刷新页面。重新加载路线是不可能的吗？
这是否意味着 this.router.navigateByUrl("some_URL) 不会调用 api 来刷新数据？

【解决方案2】：

Router 中有一个属性会导致路由重新加载。

在您的主路由模块中：（通常是 app-routing.module.ts 或内部 app.module.ts）

@NgModule({
  imports: [
    RouterModule.forRoot(
      routes,
      { onSameUrlNavigation: 'reload' }
    )
  ],
  exports: [RouterModule],
})

您必须设置选项onSameUrlNavigation: 'reload'。当您导航到同一条路线时，这将导致路线重新加载。

https://angular.io/api/router/Router#onSameUrlNavigation

如何处理对当前 URL 的导航请求。之一：

'ignore' : 路由器忽略请求。

'reload' ：路由器重新加载 URL。用于实现“刷新”功能。

【讨论】：