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

我在我的应用程序中定义了以下路由…

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

你可以使用这个指令：

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

原文地址：https://www.jb51.cc/angularjs/141598.html