如何强制 Angular 从后端重新获取特定 URL 的数据？

Question

假设我有 3 个 angular 组件：

ProjectsComponent，显示从我的后端获取的项目列表。
ProjectsFormComponent，它接受用户的输入并将项目保存到后端。
ProjectUpdateFormComponent，它接受用户的输入并在后端更新项目。

我面临的问题：

每当我创建一个新项目或更新一个项目时，它都会立即在后端更新，angular returns 从 ProjectsFormComponent 到 ProjectsComponent，但是数据它显示已过时。它不反映新添加的项目。我必须刷新页面或切换到另一个组件并返回 ProjectsComponent 以反映更改。 ProjectUpdateFormComponent.

也是如此

我尝试过的事情都是徒劳的：

app-routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],         // forces auto-refresh of current URL with real-time data
  exports: [RouterModule]
})

ProjectsFormComponent

  // Force-refresh of data from the back-end
  refresh(): void {
    window.location.reload();
  }

  addProject(): void {
    this.projectService.newProject(this.project).subscribe(data => {
      alert("Project: " + this.project.name + " has been created successfully!");
      this.refresh();
      this.router.navigate(['/projects']);
    })
  }

项目组件

  constructor(private router: Router, private projectService: ProjectService, private http: HttpClient) {
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };
  }

如何告诉 angular 始终从后端重新加载特定页面，例如 ProjectsComponent，而不是从其缓存中获取旧数据？

Answer 1

修改刷新方法以调用服务从服务器获取数据。以同样的方式添加一个新项目。

refresh() {
    this._projectService.getProjects().subscribe(data => this.projects = data);
}

或

当您添加一个新数据然后订阅响应时，让后端 return 更新数据。

addProject() {
    this._projectService.addProject(project).subscribe(data => this.projects = data)
}

如果您能够切换回组件以重新获取数据，您的答案可能就在那里。你是怎么得到它的（也许在 ngOnInit 中？）如果是这样的话，把它从 ngOnInit 中拉出来并将它放在它自己的函数中。然后你可以在多个地方调用它并在组件初始化和添加新项目时重用它。

如何强制 Angular 从后端重新获取特定 URL 的数据？

How to force Angular to re-fetch data from the Backend for specific URLs?

angular-ui-router

angular