Używam angular 2 ze strategią hashlocation.

Komponent jest ładowany tą trasą:

"departments/:id/employees"

Jak dotąd dobrze.

Po pomyślnym zapisaniu partii wielu edytowanych wierszy tabeli chcę ponownie załadować bieżący adres URL trasy za pośrednictwem:

this.router.navigate([`departments/${this.id}/employees`]);

Ale nic się nie dzieje, dlaczego?

Jeśli funkcja navigate () nie zmienia adresu URL, który jest już wyświetlany na pasku adresu przeglądarki, router nie ma nic do zrobienia. Odświeżanie danych nie jest zadaniem routera. Jeśli chcesz odświeżyć dane, utwórz usługę wstrzykniętą do komponentu i wywołaj funkcję ładowania w usłudze. Jeśli nowe dane zostaną pobrane, zaktualizuje widok za pomocą powiązań.

Można to teraz zrobić w Angular 5.1 przy użyciu onSameUrlNavigationwłaściwości konfiguracji routera.

Dodałem blog wyjaśniający, jak tutaj, ale istota jest następująca

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

W onSameUrlNavigationopcji włączania konfiguracji routera , ustawiając ją na 'reload'. Powoduje to, że router uruchamia cykl zdarzeń, gdy próbujesz nawigować do już aktywnej trasy.

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
 exports: [RouterModule],
 })

W definicjach tras ustaw runGuardsAndResolversna always. To powie routerowi, aby zawsze uruchamiał cykle strażników i resolwerów, uruchamiając powiązane zdarzenia.

export const routes: Routes = [
 {
   path: 'invites',
   component: InviteComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]

Wreszcie, w każdym komponencie, który chcesz włączyć przeładowywanie, musisz obsłużyć zdarzenia. Można to zrobić, importując router, wiążąc się ze zdarzeniami i wywołując metodę inicjalizacji, która resetuje stan komponentu i ponownie pobiera dane, jeśli jest to wymagane.

export class InviteComponent implements OnInit, OnDestroy {
 navigationSubscription;     

 constructor(
   // … your declarations here
   private router: Router,
 ) {
   // subscribe to the router events. Store the subscription so we can
   // unsubscribe later.
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) {
       this.initialiseInvites();
     }
   });
 }

 initialiseInvites() {
   // Set default values and re-fetch any data you need.
 }

 ngOnDestroy() {
   if (this.navigationSubscription) {
     this.navigationSubscription.unsubscribe();
   }
 }
}

Po wykonaniu wszystkich tych czynności należy włączyć ponowne ładowanie tras.

Utwórz w kontrolerze funkcję, która przekierowuje do oczekiwanej trasy w ten sposób

redirectTo(uri:string){
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate([uri]));
}

następnie użyj tego w ten sposób

this.redirectTo('//place your uri here');

ta funkcja przekieruje do fałszywej trasy i szybko wróci do trasy docelowej bez wiedzy użytkownika.

EDYTOWAĆ

W przypadku nowszych wersji Angulara (5.1+) użyj odpowiedzi sugerowanej przez @Simon McClive

Stara odpowiedź

Znalazłem to obejście w żądaniu funkcji GitHub dla Angular:

this._router.routeReuseStrategy.shouldReuseRoute = function(){
    return false;
};

this._router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._router.navigated = false;
        window.scrollTo(0, 0);
    }
});

Próbowałem dodać to do mojej funkcji app.component.ts ngOnInit i na pewno zadziałało. Wszystkie kolejne kliknięcia tego samego łącza powodują teraz ponowne załadowanie componentdanych i.

Link do oryginalnej prośby o funkcję GitHub

Kredyt trafia do mihaicux2 na GitHub.

Przetestowałem to na wersji 4.0.0-rc.3zimport { Router, NavigationEnd } from '@angular/router';

Trochę trudne: użyj tej samej ścieżki z niektórymi fikcyjnymi parametrami. Na przykład-

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

Używam tego dla projektu Angular 9:

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

PS: Przetestowano i działa również na „Angular 7, 8”

Przeładowanie trasy Angular 2-4

Dla mnie użycie tej metody wewnątrz komponentu głównego (komponentu, który jest obecny na dowolnej trasie) działa:

onRefresh() {
  this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;};

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

To działa na mnie jak urok

this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([<route>]));

Po zmianie parametrów strona przeładowania nie nastąpi. To naprawdę dobra funkcja. Nie ma potrzeby przeładowywania strony, ale powinniśmy zmienić wartość komponentu. paramChange wywoła zmianę adresu URL. Więc możemy zaktualizować dane komponentów

/product/: id / details

import { ActivatedRoute, Params, Router } from ‘@angular/router’;

export class ProductDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.params.subscribe(params => {
        this.paramsChange(params.id);
    });
}

// Call this method on page change

ngOnInit() {

}

// Call this method on change of the param
paramsChange(id) {

}

To właśnie zrobiłem w Angular 9 . Nie jestem pewien, czy to działa w starszych wersjach.

Będziesz musiał to wywołać, gdy będziesz musiał ponownie załadować.

 this.router.navigate([], {
    skipLocationChange: true,
    queryParamsHandling: 'merge' //== if you need to keep queryParams
  })

Router forRoot musi mieć ustawioną opcję SameUrlNavigation na „przeładowanie”

 RouterModule.forRoot(appRoutes, {
  // ..
  onSameUrlNavigation: 'reload',
  // ..
})

Każda Twoja trasa musi mieć ustawienie runGuardsAndResolvers na „zawsze”

{
    path: '',
    data: {},
    runGuardsAndResolvers: 'always'
},

U mnie pracuje na sztywno z

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

O ile wiem, nie można tego zrobić z routerem w Angular 2. Ale możesz po prostu zrobić:

window.location.href = window.location.href

Aby ponownie załadować widok.

Znalazłem szybkie i proste rozwiązanie, które nie wymaga majstrowania przy wewnętrznych funkcjach kątowych:

Zasadniczo: po prostu utwórz alternatywną trasę z tym samym modułem docelowym i po prostu przełączaj się między nimi:

const routes: Routes = [
  {
    path: 'gesuch',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  },
  {
    path: 'gesuch-neu',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  }
];

A tu menu łączone:

<ul class="navigation">
    <li routerLink="/gesuch-neu" *ngIf="'gesuch' === getSection()">Gesuch</li>
    <li routerLink="/gesuch" *ngIf="'gesuch' !== getSection()">Gesuch</li>
</ul>

Mam nadzieję, że to pomoże :)

Trochę hardcore, ale

this.router.onSameUrlNavigation = 'reload';
this.router.navigateByUrl(this.router.url).then(() => {

    this.router.onSameUrlNavigation = 'ignore';

});

W moim przypadku:

const navigationExtras: NavigationExtras = {
    queryParams: { 'param': val }
};

this.router.navigate([], navigationExtras);

działa poprawnie

zaimplementuj OnInit i wywołaj ngOnInit () w metodzie route.navigate ()

Zobacz przykład:

export class Component implements OnInit {

  constructor() {   }

  refresh() {
    this.router.navigate(['same-route-here']);
    this.ngOnInit();   }

  ngOnInit () {

  }

Rozwiązano podobny scenariusz przy użyciu fikcyjnego komponentu i trasy dla reload, który w rzeczywistości wykonuje plik redirect. To zdecydowanie nie obejmuje wszystkich scenariuszy użytkowników, ale po prostu działało w moim scenariuszu.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';

@Component({
  selector: 'reload',
  template: `
    <h1>Reloading...</h1>
  `,
})
export class ReloadComponent implements OnInit{
  constructor(private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit() {
    const url = this.route.snapshot.pathFromRoot.pop().url.map(u => u.path).join('/');
    this.router.navigateByUrl(url);
  }
}

Routing jest połączony przewodowo, aby przechwytywać wszystkie adresy URL za pomocą symbolu wieloznacznego:

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { ReloadComponent } from './views/reload/reload.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, ReloadComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { 
        path: 'reload',
        children: [{
          path: '**',
          component: ReloadComponent 
        }]
      },
      { path: '**', redirectTo: 'login'}
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

Aby z tego skorzystać, wystarczy dodać reload do adresu URL, do którego chcemy się udać:

  this.router.navigateByUrl('reload/some/route/again/fresh', {skipLocationChange: true})

Istnieją różne podejścia do odświeżania bieżącej trasy

Zmień zachowanie routera (od wersji Angular 5.1) Ustaw routery onSameUrlNavigation na „przeładuj”. Spowoduje to wyemitowanie zdarzeń routera w tej samej nawigacji URL.

• Następnie możesz sobie z nimi poradzić, subskrybując trasę
• Możesz go używać z kombinacją runGuardsAndResolvers, aby ponownie uruchomić resolwery

Pozostaw router nietknięty

• Przekaż odświeżanie queryParam z bieżącą sygnaturą czasową w adresie URL i zasubskrybuj queryParams w routowanym komponencie.
• Użyj zdarzenia aktywowania gniazda routera, aby uzyskać dostęp do routowanego komponentu.

Bardziej szczegółowe wyjaśnienie napisałem pod https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e

Mam nadzieję że to pomoże.

Załóżmy, że trasa komponentu, którą chcesz odświeżyć, to view, a następnie użyj tego:

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
}; 

możesz dodać debugger wewnątrz metody, aby wiedzieć, jaka jest dokładna trasa, do której dojdzie po nawigacji "departments/:id/employees".

Rozwiązaniem jest przekazanie fikcyjnego parametru (tj. Czasu w sekundach), w ten sposób link jest zawsze przeładowywany:

this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])

Używam setTimeoutinavigationByUrl rozwiązuję ten problem ... I dla mnie działa dobrze.

Jest przekierowywany na inny adres URL i zamiast tego pojawia się ponownie w bieżącym adresie URL ...

 setTimeout(() => {
     this.router.navigateByUrl('/dashboard', {skipLocationChange: false}).then(() =>
           this.router.navigate([route]));
     }, 500)

Uważam, że zostało to rozwiązane (natywnie) w Angular 6+; czek

• tutaj https://github.com/angular/angular/issues/13831 &&

• i tutaj https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Ale to działa dla całej trasy (obejmuje również wszystkie trasy dla dzieci)

Jeśli chcesz kierować reklamy na pojedynczy komponent, wykonaj następujące czynności: Użyj zmieniającego się parametru zapytania, aby móc nawigować dowolną liczbę razy.

W punkcie nawigacji (klasa)

   this.router.navigate(['/route'], {
        queryParams: { 'refresh': Date.now() }
    });

W komponencie, który chcesz „odświeżyć / załadować ponownie”

// . . . Component Class Body

  $_route$: Subscription;
  constructor (private _route: ActivatedRoute) {}

  ngOnInit() {
    this.$_route$ = this._route.queryParams.subscribe(params => {
      if (params['refresh']) {
         // Do Something
         // Could be calling this.ngOnInit() PS: I Strongly advise against this
      }

    });
  }

  ngOnDestroy() {
    // Always unsubscribe to prevent memory leak and unexpected behavior
    this.$_route$.unsubscribe();
  }

// . . . End of Component Class Body

Bardzo frustrujące jest to, że Angular nadal nie zawiera dobrego rozwiązania. Podniosłem tutaj problem z githubem: https://github.com/angular/angular/issues/31843

W międzyczasie to jest moje obejście. Opiera się na niektórych innych rozwiązaniach sugerowanych powyżej, ale myślę, że jest trochę bardziej wytrzymały. Obejmuje zawinięcie usługi Routera w znak „ ReloadRouter”, który zajmuje się funkcją przeładowania, a także dodaje RELOAD_PLACEHOLDERdo podstawowej konfiguracji routera. Służy do tymczasowej nawigacji i pozwala uniknąć wyzwalania innych tras (lub strażników).

Uwaga: używaj tylko ReloadRouterw tych przypadkach, gdy chcesz mieć funkcję przeładowania. W Routerprzeciwnym razie użyj normalnego .

import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ReloadRouter {
  constructor(public readonly router: Router) {
    router.config.unshift({ path: 'RELOAD_PLACEHOLDER' });
  }

  public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
    return this.router
      .navigateByUrl('/RELOAD_PLACEHOLDER', {skipLocationChange: true})
      .then(() => this.router.navigate(commands, extras));
  }
}

Importuj Routeri ActivatedRoutez@angular/router

import { ActivatedRoute, Router } from '@angular/router';

Wstrzyknij Routeri ActivatedRoute(jeśli potrzebujesz czegoś z adresu URL)

constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

W razie potrzeby pobierz dowolny parametr z adresu URL.

const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');

Użycie sztuczki, przechodząc do fałszywego lub głównego adresu URL, a następnie do rzeczywistego adresu URL, odświeży komponent.

this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`appointment/${appointmentId}`])
});

W Twoim przypadku

const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`departments/${id}/employees`]);
});

Jeśli korzystasz z fikcyjnej trasy, zobaczysz migający tytuł „Nie znaleziono”, jeśli zaimplementowałeś nie znaleziony adres URL w przypadku, gdy nie pasuje do żadnego adresu URL.

zasubskrybuj zmiany parametrów trasy

    // parent param listener ie: "/:id"
    this.route.params.subscribe(params => {
        // do something on parent param change
        let parent_id = params['id']; // set slug
    });

    // child param listener ie: "/:id/:id"
    this.route.firstChild.params.subscribe(params => {
        // do something on child param change
        let child_id = params['id'];
    });

Jeśli zmieniasz trasę przez łącze routera, wykonaj następujące czynności:

  constructor(public routerNavigate: Router){

         this.router.routeReuseStrategy.shouldReuseRoute = function () {
            return false;
          };

          this.router.events.subscribe((evt) => {

            if (evt instanceof NavigationEnd) {

                this.router.navigated = false;
             }
          })
      }

Należy użyć właściwości „onSameUrlNavigation” w module RouterModule, a następnie zasubskrybować Zdarzenia trasy https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e

Decyduje, kiedy trasa powinna być przechowywana. Return false to

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
};

i ustaw wartość nawigowaną routera na false, co oznacza, że ​​ta trasa nigdy nie była trasowana

this.mySubscription = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        this.router.navigated = false;
    }
});

Wypróbowałem kilka poprawek i żadna z nich nie działa. Moja wersja jest prosta: dodaj nowy nieużywany parametr do parametrów zapytania

            if (force) {
                let key = 'time';

                while (key in filter) {
                    key = '_' + key;
                }

                filter[key] = Date.now();
            }

            this.router.navigate(['.', { filter: JSON.stringify(filter) }]);

window.location.replace

// użyj lewego klawisza, aby zawrzeć trasę

window.location.replace ( departments/${this.id}/employees)