CODEWITHSUNDEEP
angularangular6angular-routerangular-routerlink
Ante Ereš
Ante Ereš

Reputation: 713

Router navigate to child route - Angular 6

I've defined my routes like this: 

const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' },
    { path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

and like this: 

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(list:list)',
        pathMatch: 'full',
      },
      {
        path: 'list',
        outlet: 'list',
        component: ListPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage,
        canActivate: [AuthGuardService]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(list:list)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

I am interested how I can navigate to ListPage or ProfilePage using router .navigate() method in component or routerLink in some html element.

I tried something like this

this.router.navigate(['tabs/profile']);

or

this.router.navigate(['profile']);

or

this.router.navigate(['tabs(profile:profile)']);

and got this error :

Error: Cannot match any routes. URL Segment: ''

Upvotes: 22

Views: 67193

Answers (6)

shiva
shiva

Reputation: 239

this.router.navigate(['/list'], {relativeTo: this.route});      //absolute
this.router.navigate(['./list'], {relativeTo: this.route});     //child
this.router.navigate(['../list'], {relativeTo: this.route});    //sibling
this.router.navigate(['../../list'], {relativeTo: this.route}); //parent
this.router.navigate(['tabs/list'], {relativeTo: this.route});
this.router.navigate(['/tabs/list'], {relativeTo: this.route});

You'll find here more information

Upvotes: 22

Ante Ereš
Ante Ereš

Reputation: 713

I found solution by adding profile path below '' and 'tabs' path:

  {
    path: 'profile',
    redirectTo: '/tabs/(profile:profile)',
    pathMatch: 'full'
  }

Now I am able to navigate to profile with

  this.router.navigate(['profile']);

I forgot to add this path in tabs.router.module.ts. Because of that I was getting mentioned error

Upvotes: 2

Sachin Parashar
Sachin Parashar

Reputation: 1116

It depends on from which component you wish to navigate from.

From Tabs to ListPage:

this.router.navigate(['/list'], {relativeTo: this.route});

If you're navigating from ProfilePage to ListPage (which are siblings) then, you need to use this: 

this.router.navigate(['../list'], {relativeTo: this.route});

In the above code, route is the ActivatedRoute object and so it will enable relative navigation from current route. You can inject it in the constructor like this:

constructor(private route: ActivatedRoute)

I was also facing the same problem once and tried everything but nothing worked. In the end, Visual Studio Code's Intellisense helped me with this. Hope it helps somebody.

Upvotes: 2

shivam gaddh
shivam gaddh

Reputation: 341

Try:

this.router.navigate(['child component path'], {relativeTo: this.activatedRoute});

This solved my problem. Happy coding :)

Upvotes: 34

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Mention outlets in the routerLink while navigating to particular outlet.

[routerLink]="['tabs/profile', {outlets: {'profile': ['profile'], 'list': ['none']}}]"

which will eventually generates below route

http://localhost:4200/tabs/profile/(profile:profile//list:none)

Upvotes: 1

Rahul
Rahul

Reputation: 2128

If you want to navigate to the list route you need to make the angular know that its a child route of tabs

this.router.navigate(['/tabs/list']); or this.router.navigate(['tabs','list']);

In router navigate you need to pass routes as an array of string so now the angular will find for the parent tabs and checks the child route if it is nothing it will navigate to pathMatch: 'full' if not it will navigate to the specific child route

In routerLink you can use the same array to match the route

Thanks, Happy coding !!

Upvotes: 8

Related Questions