Cómo actualizar un componente en angular

Estoy trabajando en un proyecto Angular. Estoy luchando con la acción de actualización en un componente.

Me gustaría actualizar los componentes del enrutador al hacer clic en el botón. Tengo el botón de actualización cuando hago clic en él, el componente / enrutador debe actualizarse.

Lo intenté window.location.reload()y location.reload()estos dos no son adecuados para mi necesidad. Por favor, ayude si alguien lo sabe.

Después de investigar un poco y modificar mi código como se muestra a continuación, el script funcionó para mí. Acabo de agregar la condición:

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

Utilice this.ngOnInit (); para recargar el mismo componente en lugar de recargar toda la página !!

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

        this.ngOnInit();

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

Agregar esto al código del constructor del componente requerido funcionó para mí.

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

Asegúrese de hacerlo unsubscribedesde mySubscription en ngOnDestroy().

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

Consulte este hilo para obtener más detalles: https://github.com/angular/angular/issues/13831

Afortunadamente, si está utilizando Angular 5.1+, ya no necesita implementar un truco ya que se ha agregado soporte nativo. Solo necesita configurar onSameUrlNavigation para 'recargar' en las opciones de RouterModule:

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

Puede encontrar más información aquí: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

esto está un poco fuera de la caja y no sé si esto te ayuda o no, pero ya lo has intentado

this.ngOnInit();

es una función, por lo que cualquier código que tenga se recordará como una actualización.

solo haz esto: (para angular 9)

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

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

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

Esto se puede lograr mediante un truco, navegue a algún componente de muestra y luego navegue hasta el componente que desea recargar.

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

En mi aplicación, tengo un componente y todos los datos provienen de la API a la que llamo en el constructor del componente. Hay un botón mediante el cual estoy actualizando los datos de mi página. al hacer clic en el botón, tengo guardar datos en el back-end y actualizar datos Entonces, recargar / actualizar el componente, según mi requisito, es solo actualizar los datos. si este también es su requisito, utilice el mismo código escrito en el constructor del componente.

Una forma más sin ruta explícita:

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

kdo

// 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})
}

archivo html

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

archivo ts

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

Otra forma de actualizar (de manera difícil) una página en angular 2 como esta se ve como f5

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

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}