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.
angular
routes
components
refresh
Sreehari Ballampalli
quelle
quelle
Antworten:
Nach einigen Recherchen und Änderungen meines Codes wie folgt funktionierte das Skript für mich. Ich habe gerade die Bedingung hinzugefügt:
quelle
"your actualComponent"
eine Variable ersetzt. Die gesetzte Variable wirdthis.location.path()
vor dem Aufruf von gesetztnavigateByUrl
. Auf diese Weise müssen keine Parameter von der aufrufenden Komponente übergeben oder Routen dupliziert / weitergegeben werden.'/'
wo es/RefrshComponent
ist, und für[Your actualComponent"]
Sie würden Sie einfach die URL (und / oder Parameter) übergeben, die Sie neu laden möchten, wie zthis.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.'/'
als Dummy-Route verwende, geht es (überredirectTo
) dorthin, wo meine app-routing.module.ts auf einem Pfad von''
(leere Zeichenfolge) umleitet und stoppt, ohne zur Abschlussroute imnavigate()
Aufruf überzugehen . Wenn ich eine nicht vorhandene Zeichenfolge (z. B./foo
) als Dummy-Route verwende, geht sie (überredirectTo
) 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?Verwenden Sie this.ngOnInit (); um dieselbe Komponente neu zu laden, anstatt die gesamte Seite neu zu laden !!
quelle
Das Hinzufügen zum Code zum Konstruktor der erforderlichen Komponente hat für mich funktioniert.
Stellen Sie sicher, dass Sie
unsubscribe
von diesem mySubscription inngOnDestroy()
.Weitere Informationen finden Sie in diesem Thread - https://github.com/angular/angular/issues/13831
quelle
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:
Weitere Informationen finden Sie hier: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
quelle
router.onSameUrlNavigation = 'reload'
Eigenschaft des injizierten Routers verwenden.onSameUrlNavigation
ist, 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.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.
quelle
mach das einfach: (für Winkel 9)
quelle
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.
quelle
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.
quelle
Noch ein Weg ohne explizite Route:
async reload(url: string): Promise<boolean> { await this.router.navigateByUrl('.', { skipLocationChange: true }); return this.router.navigateByUrl(url); }
quelle
kdo
quelle
quelle
Eine andere Möglichkeit, eine Seite in Winkel 2 wie diese auf (harte Weise) zu aktualisieren , sieht wie f5 aus
quelle