typescript Angular 2 刷新同一页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43582017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 refresh same page
提问by Yosefarr
I have an Component that display a list of projects, with Edit and Delete buttons
我有一个显示项目列表的组件，带有编辑和删除按钮
If i click delete:
如果我点击删除：
onDelete(projectName: string): void {
this.projectService.deleteProject(projectName);
this.router.navigate(['/projects']);
}
My router component:
我的路由器组件：
export const projectListRouters: Routes = [
{
path: '',
children: [
{path: '', component: URLComponent},
{path: 'login', component: Login},
{path: 'projects', canActivate: [AuthGuard], component: ProjectListComponent},
{path: 'project/new/-', component: ProjectDetails, canActivate: [AuthGuard], data: {oparationType: 'new'}},
// otherwise redirect to home
{path: '**', redirectTo: ''}
],
},
];
];
My problem is that the this.router.navigate(['/projects'])does not refresh the list after deleting the project,
我的问题是this.router.navigate(['/projects'])在删除项目后没有刷新列表，
回答by Jayakrishnan
I presume you are redirecting to the same page.If that's the case, then please update your model say projectListthat stores the list of project names.
我认为您正在重定向到同一页面。如果是这种情况，请更新您的模型，例如存储项目名称列表的projectList。
If deleteProjectis async call, then set this.router.navigate(['/projects']);in promise, otherwise just removing the element from projectListwill do.
如果deleteProject是异步调用，则设置this.router.navigate(['/projects']); 承诺，否则只需从projectList 中删除元素即可。
Hope it helps!!
希望能帮助到你！！
回答by Mario Petrovic
There is now way to refresh component at all. You can create dummy component, redirect to it and redirect back to /projects.
现在完全可以刷新组件。您可以创建虚拟组件，重定向到它并重定向回/projects.
After you make deletion of an item, you should just make a call to backend to retrieve list of projects as you did when you load component.
删除项目后，您应该像加载组件时一样调用后端以检索项目列表。
回答by Yashasvi
Rather you can load your project list in subscribe of service.
相反，您可以在订阅服务中加载您的项目列表。
delete() {
this._service.delete(this.id).
subscribe(x=> {
// call your list here.
this.projectList();
}, error => {
alert(error);
});
}
