Wzywam router.navigate
na tej samej stronie z niektórymi parametrami ciągu zapytania. W tym przypadku ngOnInit()
nie dzwoni. Czy jest to ustawienie domyślne, czy muszę dodać coś jeszcze?
źródło
Wzywam router.navigate
na tej samej stronie z niektórymi parametrami ciągu zapytania. W tym przypadku ngOnInit()
nie dzwoni. Czy jest to ustawienie domyślne, czy muszę dodać coś jeszcze?
Możesz wstrzyknąć ActivatedRoute
i subskrybowaćparams
constructor(route:ActivatedRoute) {
route.params.subscribe(val => {
// put the code from `ngOnInit` here
});
}
Router niszczy i odtwarza komponent tylko wtedy, gdy przechodzi do innej trasy. Gdy aktualizowane są tylko parametry trasy lub parametry zapytania, ale trasa jest taka sama, komponent nie zostanie zniszczony i odtworzony.
Alternatywnym sposobem wymuszenia ponownego utworzenia komponentu jest użycie niestandardowej strategii ponownego wykorzystania. Zobacz też Angular2 router 2.0.0 nie przeładowuje komponentów, gdy ten sam adres URL jest ładowany z różnymi parametrami? (wydaje się, że nie ma jeszcze wielu dostępnych informacji, jak to wdrożyć)
Możesz dostosować strategię reuseStrategy na routerze.
źródło
onSameUrlNavigation: 'reload'
do obiektu config tak:RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
. Nie mogę jednak mówić o innych wersjach Angulara.Kątowy 9
Użyłem następujących i zadziałało.
źródło
navigate()
?Czy prawdopodobnie potrzebujesz przeładować stronę? Oto moje rozwiązanie: zmieniłem @NgModule (w pliku app-routing.module.ts w moim przypadku):
źródło
NgOnInit
byłaby wywoływana raz podczas tworzenia instancji. W tym samym przypadkuNgOnInit
nie zostanie ponownie wywołany. Aby to wywołać, konieczne jest zniszczenie utworzonej instancji.źródło
W Twojej metodzie nawigacji
źródło
Miałem ten sam problem, dodatkowo dostałem ostrzeżenie:
Ta witryna zapewniła najlepsze rozwiązanie:
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])); }
źródło
Ten problem prawdopodobnie wynika z faktu, że nie przerywasz subskrypcji za pomocą ngOnDestroy. Oto jak to zrobić.
Wprowadź następujący import subskrypcji rxjs.
import { Subscription } from 'rxjs/Subscription';
Dodaj OnDestory do swojego importu Angular Core.
import { Component, OnDestroy, OnInit } from '@angular/core';
Dodaj OnDestory do swojej klasy eksportu.
export class DisplayComponent implements OnInit, OnDestroy {
Utwórz właściwość obiektu o wartości Subskrypcja z rxjs w ramach klasy eksportu dla każdej subskrypcji składnika.
myVariable: Subscription;
Ustaw wartość swojej subskrypcji na MyVariable: Subscriptions.
this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});
Następnie tuż pod ngOninit umieść haczyk cyklu życia ngOnDestory () i umieść oświadczenie o rezygnacji z subskrypcji dla subskrypcji. Jeśli masz wiele, dodaj więcej
ngOnDestroy() { this.myVariable.unsubscribe(); }
źródło
ngOnDestory
zamiastngOnDestroy
siebie ;-)Utwórz inną ścieżkę dla tego samego komponentu w tablicy tras.
const routes: Routes = [{ścieżka: "aplikacja", komponent: MyComponent}, {ścieżka: "app-reload", komponent: MyComponent}];
Jeśli aktualny adres URL to „aplikacja”, użyj opcji „przeładowanie aplikacji” i odwrotnie.
źródło
Oto zbiór najlepszych pomysłów na tej stronie wraz z dodatkowymi informacjami
Rozwiązanie 1 - Użyj subskrypcji params:
Samouczek: https://angular-2-training-book.rangle.io/routing/routeparams#reading-route-parameters
Dokumenty: https://angular.io/api/router/ActivatedRoute#params
W każdym z komponentów routingu, które używają zmiennych param, znajdują się następujące elementy:
Niektóre typowe problemy z tym kodem polegają na tym, że subskrypcje są asynchroniczne i mogą być trudniejsze do rozwiązania. Nie możesz też zapomnieć o anulowaniu subskrypcji na ngOnDestroy, bo inaczej mogą się zdarzyć złe rzeczy.
Dobrze, że jest to najbardziej udokumentowany i powszechny sposób rozwiązania tego problemu. W ten sposób można również poprawić wydajność, ponieważ ponownie używasz szablonu zamiast niszczyć i odtwarzać za każdym razem, gdy odwiedzasz stronę.
Rozwiązanie 2 - shouldReuseRoute / onSameUrlNavigation:
Dokumenty: https://angular.io/api/router/ExtraOptions#onSameUrlNavigation
Dokumenty: https://angular.io/api/router/RouteReuseStrategy#shouldReuseRoute
Dokumenty: https://angular.io/api/router/ActivatedRouteSnapshot#params
Znajdź
RouterModule.forRoot
lokalizację w projekcie (zwykle w app-routing.module.ts lub app.module.ts):Następnie w AppComponent dodaj następujące elementy:
Wreszcie, w komponentach routingu możesz teraz obsługiwać zmienne param w następujący sposób:
Typowe problemy z tym rozwiązaniem polegają na tym, że nie jest powszechne. Zmieniasz również domyślne zachowanie frameworka Angular, dzięki czemu możesz napotkać problemy, na które normalnie nie napotkaliby ludzie.
Dobrze, że cały twój kod jest synchroniczny i łatwiejszy do zrozumienia.
źródło
Rozważ przeniesienie kodu z ngOnInit do ngAfterViewInit. Ten ostatni wydaje się być wywoływany w nawigacji routera i powinien pomóc w tym przypadku.
źródło
Jeśli chcesz, aby router nawigował po tej samej stronie i chcesz wywołać ngOnInit (), robisz to, np.
this.router.navigate (['kategoria / lista', kategoria]) .then (() => window.location.reload ());
źródło