Jak router.navigate do tej samej trasy w Angular 4 i złapać to samo wydarzenie?

Question

Dobra, mam dwa przypadki użycia na moje pytanie tutaj:

1. pracuję nad aplikacji, która ma /en/register trasą. Wszystko działa dobrze, gdy jestem w katalogu głównym i klikam przycisk, który ma this.router.navigate([this.routeParams.lang, 'register']); i wszystko działa dobrze, to otwiera modal w konstruktorze (lub ngOnInit, anyways) z ($('#modalRegister') as any).modal('show');.

   Wszystko działa dobrze, ale jeśli zamknę modal, trasa nadal będzie /en/register/ (tak, mogę sprawić, że przejdzie ona na /en, ale zobacz przykład użycia 2 zanim to zaproponujesz), więc po kliknięciu przycisku nic nie robi. Ani konstruktor ani ngOnInit nie są wywoływane, nawetroute.params.subscribe() lub route.url.subscribe() (które moim zdaniem powinny ...).

2. W tej samej aplikacji mam przycisk, który wykonuje wyszukiwanie i centruje niektóre znaczniki na mapie (w /en/search/blah). To wszystko dobrze, jeśli jestem na stronie indeksu lub, jeśli zmienię zapytanie wyszukiwania. Jednakże, jeśli użytkownik przeciągnie mapę gdzie indziej i chce mieć ponownie te same znaczniki, ja również robię this.router.navigate(['search', this.searchQuery]); i jeśli kończy się to na tej samej trasie (na przykład kliknięcie dwa razy przycisku wyszukiwania), nic nie robi.

Chociaż zgadzam się, że to dobre, więc elementy nie uzyskać odtworzone jeżeli URL nie uległa zmianie, to jest zły projekt, ponieważ w UI-routera można zrobić to samo i że to działa (o ile pamiętam).

Tak, w Angular 4, w jaki sposób uruchomić ten sam kod w konstruktorze/ngOnInit komponentu trasy, gdy ten sam adres URL ma być nawigowany? lub jak wykryć, czy adres URL jest taki sam i odpowiednio działać? (chociaż nadal uważam, że to zły projekt, ale tak czy inaczej ...).

Każda rada jest bardzo doceniana. Dzięki!

Answer 1

Na razie 1

Dlaczego przejdź do nowej trasy po prostu otworzyć modalnego. Po prostu zrób to będąc na tej samej trasie z wywołaniem funkcji. Jeśli chcesz przejść na nową trasę, możesz ponownie zadzwonić pod numer this.router.navigate("/") w zdarzeniu zbliżania modalnego.

Dla przypadku 2, Mam nadzieję, że to zadziała.

currentSearchQuery: string; 

ngOnInit() { 
    this.route.paramMap 
    .switchMap((params: ParamMap) => { 
     this.currentSearchQuery = params.get('searchQuery'); 
     updateMarkers(); 
     }); 

} 

Answer 2

Kiedy potrzebne do „przeładować” Funkcje konstruktora ngOnInit bieżącego składnika, w jedynym rozwiązaniem znalazłem rodzaju obejście:

Kiedyś fakt, że „this.router.navigate” zwraca obietnicę. Więc nawigowałem gdzie indziej i wróciłem. To jest trochę brzydkie, ale działa, a interfejs użytkownika nie jest uszkodzony:

this.router.navigate(..[somewhere else]..) 
    .then(()=>{this.router.navigate(..back..)}) 

Mam nadzieję, że to pomoże.

Answer 3

Po prostu dodaj parametr dummy na końcu trasy/en/register/jk2h4-42hj-234n2-234dfg lub parametr zapytania jak/en/register?val = jk2h4-42hj-234n2-234dfg

zmienić wartość parametru podczas wywoływania tej samej trasy. Tak więc przeglądarka wie, że zmiana adresu URL i składnik Angualr zaczynają działać od pełnego cyklu życia.

Answer 4

używam tego obejścia

this.router.navigate(['path']).then(()=> {window.location.reload();});