如何刷新Angular中的组件

Question

我正在开展Angular项目.我正在努力应对组件中的刷新操作.

我想在按钮点击时刷新路由器的组件.当我点击它时,我有刷新按钮需要刷新组件/路由器.

我试过window.location.reload(),location.reload()这两个不适合我的需要.如果有人知道,请帮忙.

Answer 1

经过一些研究和修改我的代码如下,该脚本为我工作.我刚刚添加条件:

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
}); 

Answer 2

使用this.ngOnInit(); 重新加载相同的组件,而不是重新加载整个页面!

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }   
  }

Answer 3

将此代码添加到所需组件的构造函数的代码中.

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

请务必unsubscribe从此mySubscription中进行操作ngOnDestroy().

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

有关更多详细信息,请参阅此主题 - https://github.com/angular/angular/issues/13831

Answer 4

调用ngOnInit()不适用于我的复杂组件，我最终使用了这个

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

Answer 5

这有点开箱即用，我不知道这是否对您有帮助，但您是否尝试过

this.ngOnInit();

它是一个函数，因此您在其中包含的任何代码都将像刷新一样被调用。

Answer 6

只需按照以下步骤操作：

1. 在您的 app-routing.modules.ts 中添加{onSameUrlNavigation: 'reload'}如下内容

@NgModule({
导入: [ RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
导出: [ RouterModule ]
})

2. this.router.routeReuseStrategy.shouldReuseRoute = () => false在组件 ts 文件构造函数中添加如下内容：

constructor(private router: Router) {
      this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }

3. 现在单击按钮并调用 ajax 服务器调用，从服务器获取所需的数据并用新数据替换 TS 文件中的全局变量。
4. this.router.navigate([/sameRoute]);最后打电话 。将 SameRoute 替换为您的路线 url。
   
   
5. 确保在刷新按钮的 onClick 方法末尾返回 false，否则将导致主路由页面而不是同一页面重新加载。
   
   这些步骤将重新加载您的页面。:)

有关更多详细信息： https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

我正在使用 Angular 12。

Answer 7

幸运的是,如果您使用的是Angular 5.1+,则不再需要实施hack,因为已添加了本机支持.您只需要在RouterModule选项中将onSameUrlNavigation 设置为'reload':

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

更多信息可以在这里找到:https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Answer 8

没有明确路由的另一种方式：

async reload(url: string): Promise<boolean> {
  await this.router.navigateByUrl('.', { skipLocationChange: true });
  return this.router.navigateByUrl(url);
}

Answer 9

这可以通过 hack 来实现，导航到一些示例组件，然后导航到要重新加载的组件。

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);