Angular2 router.navigate ... Ben şu yolları Uygulamamda tanımladığınız uygulama

Question

yeniden yükler

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

zaman EmployeeDetailComponent şablondan ben rota ...

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

için uygulama yolları çalışan listeleme sayfası beklendiği gibi. Ben rota router.navigate kullanarak Ancak

...

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

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

uygulama yolları

sonra listeleme (beklendiği gibi) ve çalışan, birkaç dakika sonra, uygulama yeniden yükler tamamen (beklendiği gibi değil).

neden router.navigate routerLink farklı davranıyor fikrin var mı? Neyi kaçırıyorum?

Bu yönergeyi kullanabilirsiniz

Answer 1

:

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

ve bunu şu şekilde uygulanır:

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

:

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

Başka bir çözüm save yönteme olayı geçmek olacaktır ve olay yayılmasını durdurmak için kullanın:

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

Answer 2

benim için çalıştı olay yayılmasını iptal işlemleri ile Thierry'nin cevabı, başka bir çözüm bulduk iken;

Bir tıklama etkinliği tartışmaya açıktır dahil daha bu kıvrımlara bulmak olsun ya da olmasın (herhangi bir süre) bir zaman aşımı navigasyon sarma

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

deneyin. Benim için bir animasyonu beklemek için navigasyonu geciktirmek istedim ve bu şekilde başka bir gereksiz tıklama olayı dahil etmemi sağladım. <form> içinde

Answer 3

<button> göndermek için çalışıyor olabilir. Düğmeye tıklandığında gönderilmesini önlemek için <button type="button"> eklemeyi deneyin.