CODEWITHSUNDEEP
angulartypescript
Sampath
Sampath

Reputation: 65978

Access nested route of child page from the Root component

I need to enable nesting routes on BarcodeScannerComponent component. I have tried like below. But it is not working. The problem here is how to access the nested route within the root component. i.e. app.component.ts. Because my navigation button is on the HeaderComponent. Any clue here?

I can do this task without having nesting routes. But then my dashboard component destroys when the user moves to the barcode page. So I need to avoid that. That is why I have decided to go with the Nesting route pattern here.

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)
  },
  
];

Upvotes: 1

Views: 199

Answers (1)

Derek Wang
Derek Wang

Reputation: 10204

goToBarcodeScannerPage(): void {
  this.router.navigateByUrl('/dashboard/barcode-scanner');
}

You need to use the absolute path and it can be done by adding slash (/) in front of the url.

And now on your code, dashboard component has <router-outlet> and barcode component will be loaded inside that tag so to hide the dashboard component html code when showing the barcode component html content, it is needed to create new component that contains the dashboard component html content and make a route for that as follows.

// Create new component `DashboardMainComponent` that contains `Dashboard` component html content

On dashboard-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: '',
        component: DashboardMainComponent
      },
      {
        path: 'barcode-scanner',
        component: BarcodeScannerComponent
      },
      {
        path: '**',
        redirectTo: ''
      }
    ]
  },
];

Upvotes: 1

Related Questions