Angular2 router.navigate reloads app

Question

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?

Marc A · Accepted Answer · 2017-01-08 03:12:29Z

10

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

edited Jan 8, 2017 at 3:12

answered Oct 19, 2016 at 18:37

Marc A

7211 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Over a year ago

This seems like a preferable solution to the accepted answer.

Thierry Templier · Accepted Answer · 2016-03-25 20:15:20Z

You could use this directive:

@Directive({ selector: `click-stop-propagation` events: 'stopClick($event)' }) class ClickStopPropagation { stopClick(event:Event) { event.preventDefault(); event.stopPropagation(); } }

and apply it this way:

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

Another solution would be to pass the event to the save method:

<button class="btn btn-default" (click)="save($event)" click-stop-propagation>Save</button>

and use it to stop the event propagation:

save(event) { this._employeeServer.updateEmployee(this.employee); this._router.navigate(['EmployeeList']); event.preventDefault(); event.stopPropagation(); }

Thanks. Chose the option to pass the event in and it worked like a charm. I needed to put the router.navigate after the event method calls for the route navigation to work.
for me save($event) works wheras @directive events doesn't. Thanks !
I found that if my <button> element is inside a <form> element that I need to stop propagation of the event. However, outside a <form> element, the (click) event does not cause the page to reload.

Squimon · Accepted Answer · 2016-09-20 04:46:45Z

While Thierry's answer with cancelling the event propagation worked for me, I found another solution;

Try wrapping the navigation in a timeout (of any duration)

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

Whether or not you find this neater than including a click event is up for debate. For me, I wanted to delay the navigation to wait for an animation anyway, and this way saved me from including an otherwise redundant click event.

Collectives™ on Stack Overflow

Angular2 router.navigate reloads app

3 Answers 3

1 Comment

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Related