wake-up-neo.com

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 aktualisieren, indem Sie auf die Schaltfläche klicken. Ich habe die Schaltfläche Aktualisieren, wenn Sie darauf klicken, dass die Komponente/der Router aktualisiert werden muss.

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

angularroutescomponentsrefresh
17
Sreehari Ballampalli

Nach einigen Recherchen und der Änderung meines Codes (siehe unten) funktionierte das Skript für mich. Ich habe gerade die Bedingung hinzugefügt:

this.router.navigateByUrl('/RefrshComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Your actualComponent"]));
34
Sreehari Ballampalli

Das Hinzufügen des Codes zum Konstruktor der erforderlichen Komponente funktionierte für mich. 

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 unsubscribe von diesem mySubscription in ngOnDestroy() abgerufen wird.

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

In diesem Thread finden Sie weitere Informationen - https://github.com/angular/angular/issues/13831

11
sankar

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

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

        this.ngOnInit();

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

Glücklicherweise müssen Sie, wenn Sie Angular 5.1+ verwenden, keinen Hack mehr implementieren, da native Unterstützung hinzugefügt wurde. Sie müssen nur onSameUrlNavigation setzen, um in den RouterModule-Optionen neu zu laden:

@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

6
Lucian Moldovan

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"]);
2
Sajeetharan

In meiner Anwendung habe ich eine Komponente, und alle Daten stammen von der API, die ich im Konstruktor von Component aufrufe. Es gibt eine Schaltfläche, mit der ich meine Seitendaten aktualisiere. Wenn Sie auf die Schaltfläche klicken, werden Daten im Backend gespeichert und Daten werden aktualisiert. So kann ich die Komponente - je nach Anforderung - nur neu laden/aktualisieren. Dies gilt nur für die Aktualisierung der Daten Code geschrieben im Konstruktor der Komponente.

1
Bh00shan

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
  }
0
Julien Rousset

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

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

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}
0
chirag sorathiya