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

时间:2019-12-02 11:45:06

标签: angular angular-ui-router

假设我有3个角度分量:

  • ProjectsComponent,显示从我的后端获取的项目列表。
  • ProjectsFormComponent,它从用户处获取输入并将项目保存到后端。
  • ProjectUpdateFormComponent,它从用户那里获取输入并在后端更新项目。

我面临的问题:

每当我创建一个新项目或更新一个项目时,它都会立即在后端进行更新,并且角度返回值从ProjectsFormComponentProjectsComponent,但是显示的数据已过时。它不反映新添加的项目。我必须刷新页面或切换到另一个组件,然后再回到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']);
    })
  }

ProjectComponent

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

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

1 个答案:

答案 0 :(得分:1)

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

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

OR

让后端在添加新数据并订阅响应时返回更新的数据。

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

如果您能够切换回该组件以重新获取数据,则答案可能就在那里。如果将其从ngOnInit中拉出来并将其放在自己的函数中,您将如何获得它(可能在ngOnInit中?)。然后,您可以在多个位置调用它,并在组件初始化和添加新项目时重复使用。