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
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.
Use it like this
this.router.navigate(['bollywood/films']);
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']);