2016-06-30 26 views
31

Ecco come i percorsi e le componenti assomigliare:Angular2 router.navigate refresh della pagina

routes.config

export const routes: RouterConfig = [ 
    { path: 'users', component: UsersComponent, canActivate: [AuthGuard] }, 
    { path: 'users/new', component: NewUserComponent },  
]; 

nuovo-user.component

addField(newName: string){ 
     this.items.push({ 
      name: newName, 
     }) 
     this._router.navigate(['/users']) 

È supposto Angular2 per aggiornare la pagina su router.navigate?

Cosa altro da usare invece di router.navigate per evitare l'aggiornamento della pagina?

Ecco la prova: enter image description here

+0

No, non lo è. Puoi riprodurlo in un Plunker? https://angular.io/resources/live-examples/quickstart/ts/plnkr.html –

+0

Probabilmente no, se non dovrebbe comportarsi così, ma ci proverò. –

+0

Almeno possiamo esaminare il codice completo e verificare se qualcosa non va bene. –

risposta

78

Probabilmente si sta chiamando la funzione router.navigate all'interno di un evento click.

<button class="btn btn-default" 
    (click)="save()">Save</button> 

E la funzione di salvataggio di essere qualcosa di simile a

save() { 
    //Do stuff 
    this._router.navigate(['/users', { id: userId } ]); 
} 

Questo funziona su IE11 e browser Edge, ma sarebbe ricaricare l'applicazione in Chrome.

Questo a causa della mancanza di type nell'elemento pulsante, se il pulsante si trova all'interno di un <form></form> Chrome utilizzerà "Invia" come valore predefinito. Facendo sì che un modulo venga inviato quando si fa clic sul pulsante.

Si preferisce impostare sempre un type quando si utilizza l'elemento button See here:

Quindi cambiare il codice HTML per

<button class="btn btn-default" type="button" 
     (click)="save()">Save</button> 

Sarà farlo funzionare su tutti e 3 i browser.

La mia soluzione precedente funziona anche, (restituendo false si impedirebbe l'azione predefinita a.k.a. di inviare il modulo) ma penso che quello sopra sia preferito.

risposta obsoleto ma conservato per i posteri:

<button class="btn btn-default" 
     (click)="save(); false">Save</button> 
+0

Il refresh è finito !! Ma non posso dire esattamente cosa sta facendo 'false' e quali problemi potrebbe causare in futuro. Darò qualche altro test per un po '. Grazie! –

+0

@Cris Ho aggiornato la mia risposta con una soluzione migliore e un po 'più di spiegazione. – ElSnakeO

+0

Entrambe le soluzioni funzionano bene, ma quella che hai suggerito ha più senso. Quindi, se capisco bene, la linea di fondo è ... mai usare 'button type =" submit "' in una SPA? :-D –

2

Ho avuto lo stesso effetto (refresh della pagina durante la navigazione alla pagina dei dettagli) utilizzando un semplice <a href="/details/1"></a> collegamento. La soluzione era quella di utilizzare il collegamento angolare: <a [routerLink]="['/details', 1]"></a>

+0

[routerLink] funziona davvero, nel mio caso avevo la logica da eseguire prima di nav così [routerLink] non è un'opzione. – ttugates

1

Per me funziona bello (dal codice componente):

window.location.href = "/sth"; 

si ricarica automaticamente la pagina per data parte url.

0

Questo copre una situazione ibrida AngularJS/Angular.Sto aggiungendo la risposta perché questa domanda è uno dei migliori risultati quando si verificano problemi di ricarica della pagina del router angolare google. Spero che salverà qualcun altro tempo.

Nel mio caso ho avuto una configurazione di percorso Angular 2 (in realtà 5) molto semplice che funzionava principalmente eccetto per un caso in cui un collegamento da una rotta all'altra causava inspiegabilmente una ricarica della pagina. Avevo controllato per tutti i soliti sospetti, forma, pulsante di invio, ecc

Si è scoperto che da qualche parte in un AngularJS componente che è stato visualizzato al momento il link è stato cliccato, c'era un ng-include. La documentazione avverte su questo per una ragione, suppongo. Rimescolato il modello in modo che ng-include possa essere modificato in un templateUrl e tutto andava bene.

0

Conosco il suo metodo semplice ma è anche possibile impostare questo codice per aggiornare il percorso sull'evento di successo al termine di tutte le operazioni.

window.open ('users', '_self');

Ricaricherà e reindirizzerà alla pagina utente.