Angular2 router.navigate重新加載應用程序

Question

我的應用程序中定義了以下路由...

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

當我從EmployeeDetailComponent模板路由時......

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

應用程序按預期路由到員工列表頁面。

但是，當我使用router.navigate進行路由時......

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

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

應用程序路由員工列表（如預期的那樣），然后，片刻之后，應用程序完全重新加載（不像預期的那樣）。

知道為什么router.navigate的行為與routerLink不同嗎？ 我錯過了什么？

Answer 1

<button> <form> <button>可能正在嘗試提交。 嘗試添加<button type="button">以防止在單擊按鈕時提交。

Answer 2

你可以使用這個指令：

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

並以這種方式應用它：

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

另一種解決方案是將事件傳遞給save方法：

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

並用它來阻止事件傳播：

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

Answer 3

雖然蒂埃里對取消事件傳播的回答對我有用，但我找到了另一個解決方案;

嘗試在超時（任何持續時間）中包裝導航

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

無論你是否覺得這個整潔而不是包括點擊事件都需要辯論。 對我來說，我想延遲導航以等待動畫，這樣就省去了包含一個多余的點擊事件。