Domanda Come ricaricare il percorso corrente con il router angolare 2


Sto usando angolare 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é?


44
2017-12-05 20:48


origine


risposte:


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.


18
2017-12-05 21:01



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 al mio app.component.ts  ngOnInit funzione, 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';


39
2017-08-17 14:01



Questo può ora essere fatto in Angular 5.1 usando il onSameUrlNavigation proprietà 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 

Nell'abilitazione della configurazione del router onSameUrlNavigation opzione, impostandolo su 'reload'. Ciò fa sì che il router attivi un ciclo di eventi quando si tenta di navigare verso una rotta già attiva.

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

Nelle definizioni del percorso, impostare runGuardsAndResolvers a always. Questo dirà al router di dare sempre il via ai cicli delle protezioni e dei resolver, attivando 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 attivare il ricaricamento del percorso.


31
2018-01-16 11:18



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

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

22
2018-03-12 22:27



crate una funzione nel controller che reindirizza alla rotta prevista 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.


6
2018-03-27 09:52



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

3
2018-01-22 11:01



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:

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


2
2017-09-14 12:49



Nel mio caso:

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

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

lavoro corretto


1
2017-12-26 14:07