Angular2 router.navigate ricarica app

Question

ho i seguenti percorsi definiti nella mia app ...

app.components.ts 
@RouteConfig([ 
    {path:'/employees/...', name:'Employees', component:EmployeeComponent}, 
    ... 

employee.component.ts 
@RouteConfig([ 
    {path:'/', name:'EmployeeList', component:EmployeeListComponent, useAsDefault: true}, 
    {path:'/:id', name:'EmployeeDetail', component:EmployeeDetailComponent} 
]) 

Quando ho percorso a partire dal modello EmployeeDetailComponent ...

<button class="btn btn-default" [routerLink]="['EmployeeList']">Close</button> 

i percorsi App per il pagina di elenco dei dipendenti come previsto.

Tuttavia, quando ho percorso utilizzando router.navigate ...

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

// EmployeeDetailComponent 
saveEmployee() { 
    this._employeeServer.updateEmployee(this.employee); 
    this._router.navigate(['EmployeeList']); 
} 

i percorsi app il dell'avviso (come previsto) e poi dipendente, pochi istanti dopo, le ricariche app del tutto (non come previsto).

Qualche idea sul perché router.navigate si comporta diversamente da routerLink? Cosa mi manca?

Answer 1

Si potrebbe usare questa direttiva:

@Directive({ 
    selector: `click-stop-propagation` 
    events: 'stopClick($event)' 
}) 
class ClickStopPropagation { 
    stopClick(event:Event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    } 
} 

e applicare in questo modo:

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

Un'altra soluzione potrebbe essere quella di passare l'evento al metodo save:

<button class="btn btn-default" 
    (click)="save($event)" click-stop-propagation>Save</button> 

e usarlo per interrompere la propagazione dell'evento:

save(event) { 
    this._employeeServer.updateEmployee(this.employee); 
    this._router.navigate(['EmployeeList']); 
    event.preventDefault(); 
    event.stopPropagation(); 
} 

Answer 2

Mentre la risposta di Thierry con l'annullamento della propagazione dell'evento ha funzionato per me, ho trovato un'altra soluzione;

Prova avvolgendo la navigazione in un timeout (di qualsiasi durata)

... 
setTimeout(() => { 
    this._router.navigate(['EmployeeList']); 
}, 0); 
... 

O se non si trova questo più ordinato rispetto tra cui un evento click è per la discussione. Per quanto mi riguarda, ho voluto ritardare la navigazione per attendere comunque un'animazione, e in questo modo mi è stato impedito di includere un evento click altrimenti ridondante.

Answer 3

<button> all'interno di <form> potrebbe tentare di inviare. Prova ad aggiungere <button type="button"> per impedire l'invio quando fai clic sul pulsante.