So aktualisieren Sie eine Komponente in Angular

Ich arbeite an einem Angular-Projekt. Ich habe Probleme mit der Aktualisierungsaktion in einer Komponente.

Ich möchte die Komponenten des Routers beim Klicken auf die Schaltfläche aktualisieren. Ich habe die Schaltfläche "Aktualisieren", wenn ich darauf klicke. Die Komponente / der Router muss aktualisiert werden.

Ich habe es versucht window.location.reload()und location.reload()diese beiden sind nicht für meine Bedürfnisse geeignet. Bitte helfen Sie, wenn jemand davon Kenntnis hat.

Nach einigen Recherchen und Änderungen meines Codes wie folgt funktionierte das Skript für mich. Ich habe gerade die Bedingung hinzugefügt:

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

Verwenden Sie this.ngOnInit (); um dieselbe Komponente neu zu laden, anstatt die gesamte Seite neu zu laden !!

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

        this.ngOnInit();

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

Das Hinzufügen zum Code zum Konstruktor der erforderlichen Komponente hat für mich funktioniert.

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

Stellen Sie sicher, dass Sie unsubscribevon diesem mySubscription in ngOnDestroy().

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

Weitere Informationen finden Sie in diesem Thread - https://github.com/angular/angular/issues/13831

Wenn Sie Angular 5.1+ verwenden, müssen Sie glücklicherweise keinen Hack mehr implementieren, da native Unterstützung hinzugefügt wurde. Sie müssen onSameUrlNavigation nur so einstellen, dass es in den RouterModule-Optionen neu geladen wird:

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

Weitere Informationen finden Sie hier: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Das ist ein bisschen out of box und ich weiß nicht, ob das dir hilft oder nicht, aber du hast es versucht

this.ngOnInit();

Es ist eine Funktion, sodass jeder Code, den Sie darin haben, wie eine Aktualisierung abgerufen wird.

mach das einfach: (für Winkel 9)

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

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

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

Dies kann über einen Hack erreicht werden. Navigieren Sie zu einer Beispielkomponente und navigieren Sie dann zu der Komponente, die Sie neu laden möchten.

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

In meiner Anwendung habe ich eine Komponente und alle Daten stammen von der API, die ich im Konstruktor der Komponente aufrufe. Es gibt eine Schaltfläche, mit der ich meine Seitendaten aktualisiere. Auf Knopfdruck habe ich Daten im Backend gespeichert und Daten aktualisiert. Das Neuladen / Aktualisieren der Komponente - gemäß meiner Anforderung - bedeutet also nur das Aktualisieren der Daten. Wenn dies auch Ihre Anforderung ist, verwenden Sie denselben Code, der im Konstruktor der Komponente geschrieben wurde.

Noch ein Weg ohne explizite Route:

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

Eine andere Möglichkeit, eine Seite in Winkel 2 wie diese auf (harte Weise) zu aktualisieren , sieht wie f5 aus

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

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}