So aktualisieren Sie eine Komponente in Angular

84

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.

Sreehari Ballampalli
quelle
Können Sie Ihren Code in dieser Frage teilen? was du versucht bist.
Chandru
Es ist ein komplexer Code, es hat N Codezeilen, die schwer zu teilen sind
Sreehari Ballampalli
@ Saurabh, normalerweise ist es nicht notwendig, eine Komponente neu zu laden. Sie können eine Funktion haben (z. B. "Neustart" aufrufen) und die Funktion in Ihrer Schaltfläche Aktualisieren aufrufen. Wenn Sie ein Abonnement benötigen, um den Pfad oder einen anderen Dienst zu ändern, verwenden Sie die Funktion ngOnInit - Ihre Komponente muss OnInit- erweitern, nicht den Konstruktor
Eliseo
Dies ist, was ich mit Angular 9 stackoverflow.com/a/60909777/1072395
Wlada

Antworten:

114

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']);
}); 
Sreehari Ballampalli
quelle
1
Ich benutze dies in einem injizierbaren Dienst. Ich habe durch "your actualComponent"eine Variable ersetzt. Die gesetzte Variable wird this.location.path()vor dem Aufruf von gesetzt navigateByUrl. Auf diese Weise müssen keine Parameter von der aufrufenden Komponente übergeben oder Routen dupliziert / weitergegeben werden.
Tewr
4
Können Sie bitte erklären, was "RefrshComponent" und "Your actualComponent" ist?
Reverie_ss
15
Fast jeder wird gut damit umgehen können , '/'wo es /RefrshComponentist, und für [Your actualComponent"]Sie würden Sie einfach die URL (und / oder Parameter) übergeben, die Sie neu laden möchten, wie z this.router.navigate(["/items"]). Dieser Hack leitet im Wesentlichen zur obersten URL und dann sehr schnell zur beabsichtigten URL zurück, die für die meisten Benutzer nicht erkennbar ist und der eleganteste Hack zu sein scheint, um dies einfach zu erreichen.
leise
2
Ich bin damit einverstanden, dass dies definitiv funktionieren sollte ... aber es schlägt in meiner App fehl (Angular 6). Wenn ich '/'als Dummy-Route verwende, geht es (über redirectTo) dorthin, wo meine app-routing.module.ts auf einem Pfad von ''(leere Zeichenfolge) umleitet und stoppt, ohne zur Abschlussroute im navigate()Aufruf überzugehen . Wenn ich eine nicht vorhandene Zeichenfolge (z. B. /foo) als Dummy-Route verwende, geht sie (über redirectTo) dorthin, wo meine app-routing.module.ts umleitet **(alles andere) und stoppt erneut, ohne zur realen Route zu wechseln . Seltsamerweise ändert sich die URL-Leiste zur realen Route. Irgendwelche Gedanken darüber, was hier anders ist?
Michael Sorens
1
Dies kann eine unendliche Umleitungsschleife verursachen, wenn sie nicht sorgfältig verwendet wird
Tomas Katz
64

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");
      }   
  }
Shinoy Babu
quelle
5
Dies könnte zwar die Frage des Autors beantworten, es fehlen jedoch einige erklärende Wörter und / oder Links zur Dokumentation. Raw-Code-Schnipsel sind ohne einige Ausdrücke nicht sehr hilfreich. Möglicherweise ist es auch sehr hilfreich , eine gute Antwort zu schreiben . Bitte bearbeiten Sie Ihre Antwort.
Gelb
1
Dies ist eine bessere Eingabe als die ausgewählte Antwort, aber es fehlt eine Erklärung. In meinem speziellen Fall musste ich eine untergeordnete Komponente aktualisieren. In diesem Fall gibt es mehrere Möglichkeiten, aber die empfohlenen verwenden einen Dienst oder senden ein Ereignis vom Elternteil an das Kind.
Claudio
5
Einverstanden, dies funktioniert nur, wenn Sie die Komponente innerhalb der Komponente aktualisieren möchten - wenn Sie mit untergeordneten / externen Komponenten arbeiten, funktioniert this.ngOnInit () nicht
astro8891
3
Obwohl es für Komponenten funktioniert, werden die Formularprüfer nicht zurückgesetzt.
Vicky Gonsalves
1
Funktioniert perfekt, danke. Und in Bezug auf die Erklärung AFAIC sagt der Code alles.
Marton Tatai
27

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

Sankar
quelle
15

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

Lucian Moldovan
quelle
Sie können auch die router.onSameUrlNavigation = 'reload'Eigenschaft des injizierten Routers verwenden.
0zkr PM
4
Bei Verwendung von Winkel 6 machte dies für mich keinen Unterschied, dh die Komponente wurde nicht neu geladen. Die akzeptierte Antwort funktioniert jedoch.
Tewr
4
Obwohl dies in den Dokumenten nicht ganz klar onSameUrlNavigationist, soll es Guards / Resolver neu aufrufen und bereits geroutete Komponenten nicht neu laden. Weitere Informationen hierzu finden Sie unter github.com/angular/angular/issues/21115 . Diese Lösung funktioniert für größere, komplexere Anwendungen mit Guards / Resolvern, schlägt jedoch für einfache Beispiele fehl.
leise
1
Ja, onSameUrlNavigation wird die Navigationsereignisse erneut auslösen, aber dies lädt die Komponente nicht neu
Paul Story
6

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.

Vadapalli Chaitu
quelle
3

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(); }
Reza Piri
quelle
2
Bitte lesen Sie den Kommentar des OP, das Aktualisieren der gesamten Seite ist für ihn keine Option, es macht den Zweck
zunichte
Die Frage nach der Komponente neu laden nur nicht ganze Seite.
Santosh
2

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"]);
Sajeetharan
quelle
SampleComponent bedeutet, dass es eine leere Komponente oder eine andere Komponente in meinem Projekt sein sollte?
Sreehari Ballampalli
es sollte ein Dummy sein, kann leer sein
Sajeetharan
Ok, ich werde es versuchen
Sreehari Ballampalli
Wenn ich true gebe, wird eine Fehlermeldung angezeigt: [ts] Typ 'true' hat keine gemeinsamen Eigenschaften mit Typ 'NavigationExtras'
Sreehari Ballampalli
@SreehariBallampalli überprüfen Sie die aktualisierte Antwort, müssen Sie ein Objekt übergeben {skipLocationChange: true}
Sajeetharan
2

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.

Bh00shan
quelle
2

Noch ein Weg ohne explizite Route:

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

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
  }
Julien Rousset
quelle
1
constructor(private router:Router, private route:ActivatedRoute ) { 
}

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

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();
}
chirag sorathiya
quelle
1
Er sagte, dass das Neuladen der gesamten Seite nicht geeignet sei. Dies lade die gesamte Seite neu, nicht nur eine einzelne / mehrere Komponenten.
Milan Velebit
Ich habe dies letztendlich verwendet, außer dass der Winkelortungsdienst kein Neuladen hat, also habe ich Fenster verwendet.
Paul Story