Angular 2刷新同一页面答案

【问题标题】：Angular 2 refresh same pageAngular 2刷新同一页面
【发布时间】：2017-04-24 07:19:51
【问题描述】：

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

如果我点击删除：

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(['/projects'])删除项目后没有刷新列表，

【问题讨论】：

参考：stackoverflow.com/questions/41427405/…
你可以发布你去/projects时路由到的组件吗？
我的路由器组件：添加到问题中
@user2143023，onDelete 函数是否在同一路径中，即 /projects？
不，我的意思是包含您的 ProjectListComponent。还包括 ProjectService，以确保完整性

标签： angular typescript

【解决方案1】：

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

如果 deleteProject 是异步调用，则在 promise 中设置 this.router.navigate(['/projects']);，否则只是从 中删除元素>projectList 可以。

希望对你有帮助！！

【讨论】：

更新 projectList 解决了我的问题，感谢您的帮助

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以在订阅服务时加载您的项目列表。

delete() {

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

【讨论】：