Question

我有一个显示项目列表的组件，带有编辑和删除按钮

如果我点击删除：

onDelete(projectName: string): void {
    this.projectService.deleteProject(projectName);

    this.router.navigate(['/projects']);
}

我的路由器组件：

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: ''}
    ],
},

];

我的问题是 this.router.navigate（[＆＃39; / projects＆＃39;]） 在删除项目后没有刷新列表，

Answer 1

我认为您正在重定向到同一页面。如果是这样的话，请更新您的模型，说明存储项目名称列表的 projectList 。

如果 deleteProject 是异步通话，请在承诺中设置 this.router.navigate（[＆＃39; / projects＆＃39;]）; ，否则只需删除 projectList 中的元素可以。

希望它有所帮助!!

Answer 2

相反，您可以在订阅服务中加载项目列表。

delete() {

        this._service.delete(this.id).
            subscribe(x=> {
                // call your list here.
                this.projectList();
               }, error => {
                alert(error);
            });
    }

Answer 3

现在有办法刷新组件。您可以创建虚拟组件，重定向到它并重定向回/projects。

删除项目后，您应该像加载组件时那样调用后端来检索项目列表。

Angular 2刷新同一页

3 个答案: