Angular2 router.navigate 重新加载应用程序答案

【问题标题】：Angular2 router.navigate reloads appAngular2 router.navigate 重新加载应用程序
【发布时间】：2016-03-25 20:11:16
【问题描述】：

我的应用中定义了以下路线...

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 不同吗？我错过了什么？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

你可以使用这个指令：

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

【讨论】：

谢谢。选择传递事件的选项，它就像一个魅力。我需要在事件方法调用路由导航之后放置 router.navigate。
对我来说 save($event) 有效，而 @directive events 无效。谢谢！
我发现如果我的

【解决方案2】：

<form> 内的<button> 可能正在尝试提交。尝试添加<button type="button">以防止点击按钮时提交。

【讨论】：

这似乎是接受答案的更好解决方案。

【解决方案3】：

虽然 Thierry 的取消事件传播的答案对我有用，但我找到了另一个解决方案；

尝试在超时（任何持续时间）中包装导航

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

您是否觉得这比包含点击事件更简洁尚待商榷。对我来说，无论如何我都想延迟导航以等待动画，这样就避免了包含其他多余的点击事件。

【讨论】：