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

Question

在 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

但没有成功。请提出解决此问题的方法

Answer 1

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

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

Answer 2

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

Answer 3

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();
   }
 });    
}

Answer 4

i need to refresh current page so that content may updated

我认为为删除更新数据可能不太理想。

我会从数组正在构建的任何内容中删除已删除的数据，我假设在 *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()

Answer 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()

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

Navigating to same page after performing a operation

routing

angular