Navigating between child routes Angular 2

Question

I can't seem to be able to navigate between child routes.

Router overview:

path: 'parent', component: parentComponent,
        children: [
            { path: '', redirectTo: 'child1', pathMatch: 'full' },
            { path: 'child1', component: child1Component },
            { path: 'child2', component: child2Component },
            { path: 'new/:type', component: child3Component },

            { path: '**', component: PageNotFoundComponent }
        ]

i'm in the child1 component trying to navigate to the new/type route like so:

this._router.navigate(['new', objType], { relativeTo: this._route });

But i keep getting Error: Cannot match any routes. URL Segment: 'new/asset'.

If i manually insert the url it works fine.

Help would be greatly appreciated, thanks!

Answer 1

When you use relativeTo and then try to navigate you should put in the relative path, not just the whole one from the parents viewpoint. In your example it should be more like:

this._router.navigate([ '../', objType ], { relativeTo: this._route });

Answer 2

this.router.navigate(['../../new'], { relativeTo: this._route })

Or

this.router.navigate(['/parent/new'])

Or with anchor tag :

 <a [routerLink]=" ['../../new'] ">
      Go to new
 </a>

Or :

 <a [routerLink]=" ['/parent/new'] ">
      Go to new
 </a>

Answer 3

You can use ../

this._router.navigate(['../new', objType], { relativeTo: this._route });