I am facing an issue with enabling nesting routes on the BarcodeScannerComponent component. I have attempted the following method, but it does not seem to work. The main challenge lies in accessing the nested route within the root component, which is app.component.ts. This is because my navigation button resides in the HeaderComponent. Any suggestions or clues on how to resolve this?
Although I can accomplish the task without using nesting routes, it leads to the dashboard component being destroyed when the user navigates to the barcode page. To prevent this from happening, I have opted for the Nesting route pattern.
app.component.ts
<div>
<app-header> </app-header>
<main>
<router-outlet> </router-outlet>
</main>
</div>
header.componet.html
<p-menubar>
<i (click)="goToBarcodeScannerPage()"></i>
</p-menubar>
header.componet.ts
goToBarcodeScannerPage(): void {
this.router.navigateByUrl('barcode-scanner'); // This is not working
}
dasboard.componet.html
// removed other HTML
<router-outlet></router-outlet>
dashboard-routing.module.ts
const routes: Routes = [
{
path: '',
component: DashboardComponent,
children: [
{
path: 'barcode-scanner',
component: BarcodeScannerComponent
}
]
},
];
app-routing.module.ts
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule),
...canActivate(redirectUnauthorizedToLogin)
},
];