Come ricaricare il percorso corrente con il router angular 2

Sto usando angular 2 con strategia di hashocation.

Il componente è caricato con quella rotta:

"departments/:id/employees" 

Fin qui bene.

Dopo aver eseguito un salvataggio batch di successo di più righe della 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 a che fare. Non è compito del router aggiornare i dati. Se si desidera aggiornare i dati, creare un servizio immesso nel componente e richiamare la funzione di caricamento sul servizio. Se i nuovi dati verranno recuperati, aggiornerà la vista tramite associazioni.

Ho trovato questa soluzione alternativa su 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 ha funzionato sicuramente. Tutti gli altri clic sullo stesso link ricaricano ora component e dati.

Link alla richiesta originale di GitHub

Il merito va a mihaicux2 su GitHub.

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

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

Ho aggiunto un blog che spiega come qui, ma il succo è il seguente

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

Nel tuo router config abilita onSameUrlNavigation opzione onSameUrlNavigation , impostandola su 'reload' . Ciò fa sì che il router attivi un ciclo di eventi quando si tenta di navigare verso una rotta già triggers.

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

Nelle definizioni del percorso, impostare runGuardsAndResolvers su always . Questo dirà al router di dare sempre il via ai cicli delle protezioni e dei resolver, triggersndo gli 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 la ricarica, è necessario gestire gli eventi. Questo può essere fatto importando il router, legandosi agli eventi e invocando un metodo di inizializzazione che ripristina lo stato del componente e recupera 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 triggersre il ricaricamento del percorso.

Poco complicato: usa lo stesso percorso con alcuni parametri fittizi. Per esempio-

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

Crea una funzione nel controller che reindirizza al percorso previsto in questo modo

 redirectTo(uri:string){ this.router.navigateByUrl('/DummyComponent', {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.

Angular 2-4 route relack hack

Per me, utilizzando questo metodo all’interno di un componente root (componente, che è presente su qualsiasi percorso) 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]); }); } 

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

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 commutazione:

  

Spero che sia d’aiuto 🙂

Nel mio caso:

 const navigationExtras: NavigationExtras = { queryParams: { 'param': val } }; this.router.navigate([], navigationExtras); 

lavoro corretto

Sulla pagina di modifica del cambio param non accadrà. Questa è davvero una buona caratteristica. Non è necessario ricaricare la pagina ma è necessario modificare il valore del componente. il metodo paramChange chiamerà sul cambiamento dell’URL. Quindi possiamo aggiornare i dati del componente

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

Per me lavora con hardcoding

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

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

Guarda un esempio:

 export class Component implements OnInit { constructor() { } refresh() { this.router.navigate(['same-route-here']); this.ngOnInit(); } ngOnInit () { } 

Risolto uno scenario simile utilizzando un componente fittizio e percorso per la reload , che in realtà esegue un redirect . Questo sicuramente non copre tutti gli scenari dell’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: ` 

Reloading...

`, }) 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 usare questo, abbiamo solo bisogno di aggiungere il ricarico all’url dove vogliamo andare:

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

iscriversi per instradare le modifiche ai parametri

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

Supponiamo che la rotta 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 debugger all’interno del metodo per sapere quale sarà il percorso esatto dopo aver navigato in "departments/:id/employees" .

Questo ha funzionato per me:

 let url = `departments/${this.id}/employees`; this.router.navigated = false; this.router.navigateByUrl(url); 

ricarica la rotta attuale in angular 2 link molto utile per ricaricare la rotta corrente in angualr 2 o 4

in questo definisci due tecniche per farlo

  1. con parametri di query fittizi
  2. con percorso fittizio

per altro vedi sopra link

Prova questo

window.open (‘dashboard’, ‘_self’);

il suo vecchio metodo, ma funziona su tutte le versioni angolari, dove reindirizza sul percorso e aggiorna la pagina.

basta usare il metodo di ricarica javascript nativo:

 reloadPage() { window.location.reload(); }