Angular2路由导航重新加载应用程序

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

- Todd Breyman

Answer 1

<form> 中的 <button> 可能会尝试提交表单。尝试添加 <button type="button"> 以防止在单击按钮时提交表单。

- Marc A

---

这似乎是一个比被接受的答案更可取的解决方案。 - Sean

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

- Thierry Templier

---

谢谢。选择将事件传递并且它像魔法一样奏效了。我需要在事件方法调用之后放置router.navigate以使路由导航正常工作。 - Todd Breyman

对我来说，save($event) 起作用，而 @directive events 不起作用。谢谢！ - Patrice

我发现如果我的<button>元素在<form>元素内部，那么我需要停止事件的传播。然而，在<form>元素外部，(click)事件不会导致页面重新加载。 - user2444499

Answer 3

虽然Thierry的取消事件传播的解决方案对我有用，但我发现另一种解决方案; 尝试在超时（任何持续时间）中包装导航。

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

无论您是否认为这比包含单击事件更整洁，都是有争议的。对我来说，我想延迟导航以等待动画完成，这种方式使我免于包含本来多余的单击事件。

- Squimon