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