如何在Angular中刷新组件

我正在做一个Angular项目。我正在为组件中的刷新动作而苦苦挣扎。

我想在单击按钮时刷新路由器的组件。当我单击它时，我有刷新按钮，组件/路由器需要刷新。

我尝试过window.location.reload()，location.reload()这两个都不适合我的需要。如果有人知道，请帮助。

经过研究并按如下所示修改了我的代码，该脚本对我有用。我刚刚添加了条件：

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

使用this.ngOnInit（）; 重新加载相同的组件，而不是重新加载整个页面！

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

        this.ngOnInit();

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

将其添加到所需组件的构造函数的代码中对我有用。

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

幸运的是，如果您使用的是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

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

this.ngOnInit();

它是一个函数，因此无论您在其中拥有什么代码，都将像刷新一样被调用。

只需这样做：（对于角度9）

import { Inject } from '@angular/core';    
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document){ }

someMethode(){ this.document.location.reload(); }

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

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

在我的应用程序中，我有组件，并且所有数据均来自我在组件的构造函数中调用的API。我通过按钮可以更新页面数据。在按钮上单击，我将数据保存在后端并刷新数据。因此，按照我的要求，重新加载/刷新组件仅是刷新数据。如果这也是您的要求，则使用在组件的构造函数中编写的相同代码。

没有显式路由的另一种方法：

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

do

// reload page hack methode

push(uri: string) {
    this.location.replaceState(uri) // force replace and no show change
    await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
    this.location.replaceState(uri) // replace
  }

constructor(private router:Router, private route:ActivatedRoute ) { 
}

onReload(){
 this.router.navigate(['/servers'],{relativeTo:this.route})
}

html文件

<a (click)= "getcoursedetails(obj.Id)" routerLinkActive="active" class="btn btn-danger">Read more...</a>

ts文件

  getcoursedetails(id)
  { 
  this._route.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this._route.navigate(["course",id]);
  }); 

这样刷新（硬）角度2中的页面的其他方法 看起来像是f5

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}