Ich rufe router.navigate
auf derselben Seite mit einigen Abfragezeichenfolgenparametern auf. In diesem Fall ngOnInit()
ruft nicht an. Ist es standardmäßig oder muss ich noch etwas hinzufügen?
quelle
Ich rufe router.navigate
auf derselben Seite mit einigen Abfragezeichenfolgenparametern auf. In diesem Fall ngOnInit()
ruft nicht an. Ist es standardmäßig oder muss ich noch etwas hinzufügen?
Sie können das injizieren ActivatedRoute
und abonnierenparams
constructor(route:ActivatedRoute) {
route.params.subscribe(val => {
// put the code from `ngOnInit` here
});
}
Der Router zerstört und erstellt die Komponente nur neu, wenn er zu einer anderen Route navigiert. Wenn nur Routenparameter oder Abfrageparameter aktualisiert werden, die Route jedoch dieselbe ist, wird die Komponente nicht zerstört und neu erstellt.
Eine alternative Möglichkeit, die Neuerstellung der Komponente zu erzwingen, ist die Verwendung einer benutzerdefinierten Wiederverwendungsstrategie. Siehe auch Angular2 Router 2.0.0 lädt keine Komponenten neu, wenn dieselbe URL mit unterschiedlichen Parametern geladen wurde. (Es scheinen noch nicht viele Informationen verfügbar zu sein, wie man es implementiert)
Sie können die reuseStrategy auf dem Router anpassen.
quelle
onSameUrlNavigation: 'reload'
das Konfigurationsobjekt wie folgt hinzufügen müssen :RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
. Kann aber nicht für andere Angular-Versionen sprechen.Winkel 9
Ich habe folgendes verwendet und es hat funktioniert.
quelle
navigate()
?Benötigen Sie wahrscheinlich eine Seite zum Neuladen? Dies ist meine Lösung: Ich habe das @ NgModule geändert ( in meinem Fall in der Datei app-routing.module.ts ):
quelle
NgOnInit
würde einmal aufgerufen, wenn eine Instanz erstellt wird. Für die gleiche InstanzNgOnInit
wird nicht wieder aufgerufen. Um es aufzurufen, muss die erstellte Instanz zerstört werden.quelle
Auf Ihrer Navigationsmethode,
quelle
Ich hatte das gleiche Problem, zusätzlich bekam ich die Warnung:
Diese Seite bot die beste Lösung:
import { Router } from '@angular/router'; import { NgZone } from '@angular/core'; ... constructor( private ngZone:NgZone, private _router: Router ){ } redirect(to) { // call with ngZone, so that ngOnOnit of component is called this.ngZone.run(()=>this._router.navigate([to])); }
quelle
Dieses Problem ist wahrscheinlich darauf zurückzuführen, dass Sie Ihre Abonnements nicht mit ngOnDestroy kündigen. Hier erfahren Sie, wie Sie es schaffen.
Bringen Sie den folgenden rxjs-Abonnementimport mit.
import { Subscription } from 'rxjs/Subscription';
Fügen Sie Ihrem Angular Core-Import OnDestory hinzu.
import { Component, OnDestroy, OnInit } from '@angular/core';
Fügen Sie Ihrer Exportklasse OnDestory hinzu.
export class DisplayComponent implements OnInit, OnDestroy {
Erstellen Sie für jedes Abonnement der Komponente eine Objekteigenschaft mit dem Wert Subscription von rxjs unter Ihrer Exportklasse.
myVariable: Subscription;
Stellen Sie den Wert Ihres Abonnements auf MyVariable: Subscriptions ein.
this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});
Platzieren Sie dann direkt unter ngOninit den Lebenszyklus-Hook ngOnDestory () und geben Sie Ihre Abmeldeerklärung für Ihr Abonnement ein. Wenn Sie mehrere haben, fügen Sie weitere hinzu
ngOnDestroy() { this.myVariable.unsubscribe(); }
quelle
ngOnDestory
anstattngOnDestroy
mich selbstErstellen Sie einen anderen Pfad für dieselbe Komponente im Routenarray.
const route: Routes = [{Pfad: "App", Komponente: MyComponent}, {Pfad: "App-Reload", Komponente: MyComponent}];
Wenn die aktuelle URL "App" lautet, navigieren Sie mit "App-Reload" und umgekehrt.
quelle
Hier finden Sie eine Sammlung der besten Ideen auf dieser Seite mit weiteren Informationen
Lösung 1 - Verwenden Sie das params-Abonnement:
Tutorial: https://angular-2-training-book.rangle.io/routing/routeparams#reading-route-parameters
Dokumente: https://angular.io/api/router/ActivatedRoute#params
In jeder Ihrer Routing-Komponenten, die Parametervariablen verwenden, ist Folgendes enthalten:
Einige häufige Probleme mit diesem Code sind, dass Abonnements asynchron sind und schwieriger zu handhaben sind. Sie können auch nicht vergessen, sich bei ngOnDestroy abzumelden, da sonst schlimme Dinge passieren können.
Gut ist, dass dies der am besten dokumentierte und gebräuchlichste Weg ist, um dieses Problem zu lösen. Auf diese Weise wird auch die Leistung verbessert, da Sie die Vorlage wiederverwenden, anstatt sie bei jedem Besuch einer Seite zu zerstören und neu zu erstellen.
Lösung 2 - shouldReuseRoute / onSameUrlNavigation:
Dokumente: https://angular.io/api/router/ExtraOptions#onSameUrlNavigation
Dokumente: https://angular.io/api/router/RouteReuseStrategy#shouldReuseRoute
Dokumente: https://angular.io/api/router/ActivatedRouteSnapshot#params
Finden Sie heraus, wo
RouterModule.forRoot
sich Ihr Projekt befindet (normalerweise in app-routing.module.ts oder app.module.ts):Fügen Sie dann in AppComponent Folgendes hinzu:
Zuletzt können Sie in Ihren Routing-Komponenten jetzt folgende Parametervariablen verarbeiten:
Häufige Probleme mit dieser Lösung sind, dass es nicht häufig ist. Außerdem ändern Sie das Standardverhalten des Angular-Frameworks, sodass Sie auf Probleme stoßen können, auf die Menschen normalerweise nicht stoßen würden.
Gut ist, dass Ihr gesamter Code synchron und leichter zu verstehen ist.
quelle
Verschieben Sie den Code, den Sie in ngOnInit hatten, in ngAfterViewInit. Letzteres scheint in der Routernavigation aufgerufen zu werden und sollte Ihnen in diesem Fall helfen.
quelle
Wenn Sie mit dem Router auf derselben Seite navigieren und ngOnInit () aufrufen möchten, gefällt Ihnen dies z.
this.router.navigate (['category / list', category]) .then (() => window.location.reload ());
quelle