What is the difference between router.navigate and router.parent.navigate in Angular2?

Question

Actually I want to know the difference between router.navigate(['User']) and router.parent.navigate(['User']) . In my Angular2 project act same things for both.

thanks advance

Answer 1

You try to navigate to the route defined in the current router ( router.navigate(['User']) or to a one defined in the parent router ( router.parent.navigate(['User']) ).

As a matter of fact, you can define several levels of routes. If the User route is defined in the route config associated with the router, router.navigate(['User']) will work. If it's in the route config associated with the parent router, router.parent.navigate(['User']) will work.

For example, if you have two levels and want to navigate to the root level, you can use this:

router.navigate(['/User']);

Example

• In the AppComponent component (application component):

   @RouteConfig([ { path: '/sub/...', name: 'SubComponent', component: SubComponent, useAsDefault: true }, {path: '/user', name: 'User', component: UserComponent} {path: '/other', name: 'Other', component: OtherComponent} ])

• In the SubComponent component:

   @RouteConfig([ {path: '/test', name: 'Test', component: TestComponent} ])

In this case, router.parent.navigate(['User']) will work for components defined in routes of the SubComponent component (for example: TestComponent ). router.navigate(['User']) will work for components defined in routes of the AppComponent component (for example: OtherComponent ).