Angular Nested Child Routing

Question

I am learning use of multiple router-outlet.

While using navigateBy function of router, i am not able to view my child route and getting error. But if i access it via routerLink in html i get the desired output.

So in below code, navigation to songs is working , but navigation to films is not.

const routes = [
  {
    path: 'bollywood',
    component: BollywoodComponent,
    children: [
      {
        path: 'films',
        component: FilmsComponent,
      },
      {
        path: 'songs',
        component: SongsComponent,
      },
    ],
  },
  {
    path: 'hollywood',
    component: HollywoodComponent,
  },
  {
    path: 'tollywood',
    component: TollywoodComponent
  },
];

App Component html

<button class="f-margin-16" (click)="navigateToBollywoodSection()"> Bollywood </button>
<button class="f-margin-16"  (click)="navigateToHollywoodSection()"> Hollywood </button>
<button class="f-margin-16" [routerLink]="['tollywood']" > Tollywood </button>

<br>
Router outlet starts now

<router-outlet> </router-outlet>

Bollywood Component html

<button (click)="navigateToFilms()"> Films </button>
<button [routerLink]="['songs']"> Songs </button>

<router-outlet> </router-outlet>

  navigateToFilms() {
    this.router.navigate(['/films']);
  }

StackBitz Link https://stackblitz.com/edit/angular-ivy-1nzkus?file=src/app/bollywood/bollywood.component.html

KAMLESH KUMAR · Accepted Answer · 2022-09-28T09:07:53.133

1

In router.navigate, you can pass relativeTo as the second param.

navigateToFilms() {
    this.router.navigate(['films'], {relativeTo: this.activatedRoute} );
}

This way navigation will happen relative to the current route. In the constructor you can add the ActivatedRoute dependency.

constructor(private activatedRoute: ActivatedRoute) {}

If you use <button [routerLink]="['songs']"> Songs </button>, the navigation by default happens relative to the current route.

edited Sep 28 '22 at 09:07

answered Sep 28 '22 at 08:51

KAMLESH KUMAR

130
7

This works, but you need to use `this.router.navigate(['films']` instead of `this.router.navigate(['/films']` – Sep 28 '22 at 08:57
Okay I was not aware about relativeTo thanks. – Achal Utkarsh Sep 28 '22 at 09:00
Yes it was a mistake. Thanks @MikeS. I have updated the answer – KAMLESH KUMAR Sep 28 '22 at 09:07

score 0 · Answer 2 · answered Sep 28 '22 at 08:49

0

Use it like this

this.router.navigate(['bollywood/films']);

answered Sep 28 '22 at 08:49

Sharanya

81
5

It would be helpful if you explained why you need to pass the full path from the root url, while passing only the segment to the `routerLink` inside of the template works. – Sep 28 '22 at 08:51
The navigate() method requires a starting point (i.e., the relativeTo parameter). If none is provided, the navigation is absolute: You can refer to a detailed explanation in this post https://stackoverflow.com/questions/38634237/how-do-i-navigate-to-a-sibling-route/38808116#38808116 – Sharanya Sep 28 '22 at 08:54

Harun Malek · Answer 3 · 2022-09-28T11:08:24.027

0

If you want to use a navigation route then you can use this code. because without a specific parent route you can't access child routing.

this.router.navigate(['/bollywood/films']);

edited Sep 28 '22 at 11:08

answered Sep 28 '22 at 11:05

Harun Malek

1
1

Angular Nested Child Routing

3 Answers3