执行操作后导航到同一页面答案

【问题标题】：Navigating to same page after performing a operation执行操作后导航到同一页面
【发布时间】：2019-12-03 09:16:04
【问题描述】：

在 Angular8 中，我有一个页面列出了一些信息，并且在从当前页面删除行后有删除选项，我需要刷新当前页面以便更新内容。我为此使用了导航，但由于同一页面导航问题而无法正常工作

下面是我删除记录的代码

deleteBusiness(id) {    
    this.bs.deleteBusiness(id).subscribe(
      res =>{console.log(res)},
      error=>console.log(error.message),
      ()=>{this.router.navigate(['business'])}
    );    
  }

我在定义的死记中使用了onSameUrlNavigation，但它不起作用。请让我知道这里遗漏了什么以下是我的路线配置

const routes: Routes = [
  {
    path: 'business/create',
    component: GstAddComponent
  },
  {
    path: 'business/edit/:id',
    component: GstEditComponent
  },
  {
    path: 'business',
    component: GstGetComponent,
    runGuardsAndResolvers: 'always'
  },
  {
    path: '',
    redirectTo: "/business",
    pathMatch :"full"
  },
];

我已使用以下链接退出此问题

Angular 6 router link issue in the same page

但没有成功。请提出一种解决方法

【问题讨论】：

标签： angular routing

【解决方案1】：

我需要刷新当前页面，以便更新内容

我认为通过刷新来更新数据以进行删除可能并不理想。

我将从正在构建的数组中删除已删除的数据，我假设它位于*ngFor 中。让我们假设这被称为业务并且是一个数组。

public business = []; // holds youd business objects.

public deleteBusiness(id): void
{    
    this.bs.deleteBusiness(id).subscribe(res => 
    {
        const toRemove = this.business.findIndex(data => data.id = id);

        if (toRemove !== -1)
        {
            this.business.splice(toRemove, 1);
        }

    },
    error => 
    { 
        console.log(error.message),
    }
    );    
}

这将确保视图与已删除的项目是最新的，然后当页面最终刷新时，已删除的数据将不会再次加载。如果有任何问题，请发表评论。

.findIndex()

.splice()

【讨论】：

非常感谢 :)

【解决方案2】：

您不必为了刷新数据而重新加载页面。自从 AJAX 发明以来就没有！当删除承诺解决时，调用加载数据的函数。

deleteBusiness(id) {    
    this.bs.deleteBusiness(id).subscribe(()=>{
         this.loadData();
    });    
  }

【讨论】：

【解决方案3】：

window.location.reload();这会重新加载整个页面，但最好不要仅仅为了更新值而这样做，您可以通过拼接array.splice(index_value,1);从数组中删除该值，或者只调用保存结果的api。

【讨论】：

【解决方案4】：

deleteBusiness(id) {    
 this.bs.deleteBusiness(id).subscribe( (err,res) => {
   if(err){ /* Do Something */ }
   else{  
          /* Here call the function which fetch this list like */  
       this.functionName();
   }
 });    
}

【讨论】：

【解决方案5】：

router.navigate() 函数仅在 URL 发生变化时调用，您需要做的是获取响应并在响应成功时触发 getAll 调用。

// 假设你有一个获取所有数据的函数。

deleteBusiness(id) {    
    this.bs.deleteBusiness(id).subscribe(
      res =>{this.getAll()},
      error=>console.log(error.message),
      ()=>{this.router.navigate(['business'])}
    );    
  }

//如果不存在则定义getAll()

【讨论】：