Sto usando angular 2 con strategia di hashlocation.

Il componente viene caricato con quel percorso:

"departments/:id/employees"

Fin qui tutto bene.

Dopo aver eseguito correttamente il salvataggio in batch di più righe di tabella modificate, voglio ricaricare l'URL del percorso corrente tramite:

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

Ma non succede nulla, perché?

Se la tua navigazione () non modifica l'URL già mostrato nella barra degli indirizzi del tuo browser, il router non ha nulla da fare. Non è compito del router aggiornare i dati. Se si desidera aggiornare i dati, creare un servizio iniettato nel componente e richiamare la funzione di caricamento sul servizio. Se i nuovi dati verranno recuperati, aggiornerà la vista tramite associazioni.

Questo ora può essere fatto in Angular 5.1 usando la onSameUrlNavigationproprietà della configurazione del router.

Ho aggiunto un blog che spiega come qui, ma l'essenza è la seguente

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

onSameUrlNavigationNell'opzione di abilitazione della configurazione del router , impostandola su 'reload'. Ciò fa sì che il router attivi un ciclo di eventi quando si tenta di navigare verso un percorso già attivo.

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

Nelle definizioni del percorso, impostare runGuardsAndResolverssu always. Questo dirà al router di dare sempre il via ai cicli di guardie e risolutori, lanciando eventi associati.

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

Infine, in ogni componente che si desidera abilitare il ricaricamento, è necessario gestire gli eventi. Questo può essere fatto importando il router, associandolo agli eventi e invocando un metodo di inizializzazione che reimposta lo stato del componente e recupera nuovamente i dati, se necessario.

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();
   }
 }
}

Con tutti questi passaggi in atto, è necessario abilitare il ricaricamento del percorso.

Creare una funzione nel controller che reindirizzi alla route prevista in questo modo

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

quindi usalo in questo modo

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

questa funzione reindirizzerà a un percorso fittizio e tornerà rapidamente al percorso di destinazione senza che l'utente se ne accorga.

MODIFICARE

Per le versioni più recenti di Angular (5.1+) utilizzare la risposta suggerita da @Simon McClive

Vecchia risposta

Ho trovato questa soluzione alternativa in una richiesta di funzionalità GitHub per 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);
    }
});

Ho provato ad aggiungere questo alla mia funzione app.component.ts ngOnInit , e sicuramente ha funzionato. Tutti gli altri clic sullo stesso collegamento ora ricaricano i componentdati e.

Collegamento alla richiesta di funzionalità GitHub originale

Il merito va a mihaicux2 su GitHub.

Ho provato questo sulla versione 4.0.0-rc.3conimport { Router, NavigationEnd } from '@angular/router';

Un po 'complicato: usa lo stesso percorso con alcuni parametri fittizi. Per esempio-

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

Sto usando questo per il progetto Angular 9:

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

PS: testato e funziona anche su "Angular 7, 8"

Incisione ricaricabile angolare 2-4 percorsi

Per me, usare questo metodo all'interno di un componente root (componente, presente su qualsiasi route) funziona:

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]);
    });
  }

Questo funziona per me come un incantesimo

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

Sulla pagina di ricarica modifica parametri non accadrà. Questa è davvero una buona funzionalità. Non è necessario ricaricare la pagina ma dovremmo modificare il valore del componente. Il metodo paramChange richiamerà la modifica dell'URL. Quindi possiamo aggiornare i dati dei componenti

/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) {

}

Questo è quello che ho fatto con Angular 9 . Non sono sicuro che funzioni nelle versioni precedenti.

Dovrai chiamare questo quando dovrai ricaricare.

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

Il router per Root deve avere SameUrlNavigation impostato su 'ricaricare'

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

E ogni tuo percorso deve avere runGuardsAndResolvers impostato su 'sempre'

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

Per me funziona hardcoding con

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

Per quanto ne so, questo non può essere fatto con il router in Angular 2. Ma potresti semplicemente fare:

window.location.href = window.location.href

Per ricaricare la vista.

Trovato una soluzione rapida e diretta che non richiede di armeggiare con i meccanismi interni dell'angolare:

Fondamentalmente: basta creare un percorso alternativo con lo stesso modulo di destinazione e passare da uno all'altro:

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

E qui il menu di attivazione:

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

Spero che sia d'aiuto :)

Un po 'hardcore ma

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

    this.router.onSameUrlNavigation = 'ignore';

});

Nel mio caso:

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

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

funziona correttamente

implementare OnInit e chiamare ngOnInit () nel metodo per route.navigate ()

Vedi un esempio:

export class Component implements OnInit {

  constructor() {   }

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

  ngOnInit () {

  }

Risolto uno scenario simile usando un componente fittizio e route per reload, che in realtà fa un redirect. Questo sicuramente non copre tutti gli scenari utente ma ha funzionato solo per il mio scenario.

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);
  }
}

Il routing è cablato per catturare tutti gli URL usando un carattere jolly:

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 {}

Per usarlo, dobbiamo solo aggiungere ricaricare l'URL dove vogliamo andare:

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

Esistono diversi approcci per aggiornare il percorso corrente

Modifica comportamento router (da Angular 5.1) Impostare i router onSameUrlNavigation su 'ricaricare'. Ciò emetterà gli eventi del router sulla stessa navigazione URL.

• Puoi quindi gestirli iscrivendoti a un percorso
• Puoi usarlo con la combinazione di runGuardsAndResolvers per eseguire nuovamente i resolver

Lascia intatto il router

• Passa a queryParam di aggiornamento con il timestamp corrente nell'URL e iscriviti a queryParams nel componente indirizzato.
• Utilizzare l'evento di attivazione della presa del router per ottenere una sospensione del componente indirizzato.

Ho scritto una spiegazione più dettagliata sotto https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e

Spero che questo ti aiuti.

Supponiamo che il percorso del componente che desideri aggiornare sia view, quindi usa questo:

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);
}; 

puoi aggiungere un debuggermetodo interno per sapere qual è il percorso esatto che verrà dopo la navigazione "departments/:id/employees".

Una soluzione è passare un parametro fittizio (ovvero il tempo in secondi), in questo modo il collegamento viene sempre ricaricato:

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

Sto usando setTimeoute navigationByUrlper risolvere questo problema ... E funziona bene per me.

Viene reindirizzato a un altro URL e invece viene nuovamente visualizzato nell'URL corrente ...

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

Credo che questo sia stato risolto (nativamente) in Angular 6+; dai un'occhiata

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

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

Questo funziona per un intero percorso (include anche tutti i percorsi per bambini)

Se vuoi scegliere come target un singolo componente, ecco come: Usa un parametro di query che cambia, in modo da poter navigare tutte le volte che vuoi.

Al punto di navigazione (classe)

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

Nel componente che si desidera "aggiornare / ricaricare"

// . . . 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

Molto frustrante che Angular non sembra ancora includere una buona soluzione per questo. Ho sollevato un problema github qui: https://github.com/angular/angular/issues/31843

Nel frattempo, questa è la mia soluzione alternativa. Si basa su alcune delle altre soluzioni suggerite sopra, ma penso che sia un po 'più robusto. Implica il wrapping del servizio Router in un " ReloadRouter", che si occupa della funzionalità di ricarica e aggiunge anche una RELOAD_PLACEHOLDERconfigurazione del router principale. Viene utilizzato per la navigazione intermedia ed evita di attivare altri percorsi (o protezioni).

Nota: utilizzare il solo ReloadRouterin quei casi quando si desidera la funzionalità di ricarica. Usa il normale Routeraltrimenti.

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));
  }
}

Importa Routere ActivatedRouteda@angular/router

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

Inject Routere ActivatedRoute(nel caso abbiate bisogno di qualcosa dall'URL)

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

Ottieni qualsiasi parametro, se necessario, dall'URL.

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

Utilizzando un trucco passando a un manichino o a un URL principale, quindi all'URL effettivo, il componente verrà aggiornato.

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

Nel tuo caso

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

Se usi un percorso fittizio, vedrai il titolo lampeggiare "Non trovato" se hai implementato un URL non trovato nel caso in cui non corrisponda a nessun URL.

iscriviti per modificare i parametri del percorso

    // 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'];
    });

Se si sta modificando il percorso tramite il collegamento del router, attenersi alla seguente procedura:

  constructor(public routerNavigate: Router){

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

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

            if (evt instanceof NavigationEnd) {

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

È necessario utilizzare la proprietà "onSameUrlNavigation" in RouterModule e quindi iscriversi agli eventi Route https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e

Decide quando deve essere memorizzato il percorso restituire false

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

e impostare il valore navigato del router su false, che mostra che questa route non è mai stata instradata

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

Ho provato alcune correzioni e nessuna di queste funziona. La mia versione è semplice: aggiungi un nuovo parametro non utilizzato nei parametri della query

            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

// usa backtick per racchiudere il percorso

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