Angular2 router.navigate reloads app

user_6115423 0
Viewed 4158

I have the following routes defined in my app ...

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

When I route from the EmployeeDetailComponent template ...

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

the app routes to the employee listing page as expected.

However, when I route using router.navigate ...

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

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

the app routes the the employee listing (as expected) and then, a few moments later, the app reloads entirely (not as expected).

Any idea why router.navigate is behaving differently than routerLink? What am I missing?

angular2-routing angular
3 Answers

<button> within <form> may be trying to submit. Try adding <button type="button"> to prevent the from submitting when clicking the button.

user_37868560
Related