Angular Nested Child Routing-CodePudding

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  (click)="navigateToBollywoodSection()"> Bollywood </button>
<button   (click)="navigateToHollywoodSection()"> Hollywood </button>
<button  [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

CodePudding user response：

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.

CodePudding user response：

Use it like this

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

CodePudding user response：

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']);