假设我有3个角度分量:
我面临的问题:
每当我创建一个新项目或更新一个项目时,它都会立即在后端进行更新,并且角度返回值从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']);
})
}
ProjectComponent
constructor(private router: Router, private projectService: ProjectService, private http: HttpClient) {
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
}
我如何告诉angular始终总是从后端重新加载特定页面,例如ProjectsComponent
而不是从其缓存中获取旧数据?
答案 0 :(得分:1)
修改您的刷新方法,以调用服务以从服务器获取数据。同样,您要添加一个新项目。
refresh() {
this._projectService.getProjects().subscribe(data => this.projects = data);
}
OR
让后端在添加新数据并订阅响应时返回更新的数据。
addProject() {
this._projectService.addProject(project).subscribe(data => this.projects = data)
}
如果您能够切换回该组件以重新获取数据,则答案可能就在那里。如果将其从ngOnInit中拉出来并将其放在自己的函数中,您将如何获得它(可能在ngOnInit中?)。然后,您可以在多个位置调用它,并在组件初始化和添加新项目时重复使用。