从根组件访问子页面的嵌套路由

Question

我需要在BarcodeScannerComponent组件上启用嵌套路由。我试过如下所示。但这是行不通的。这里的问题是如何访问根组件中的嵌套路由。即app.component.ts.因为我的导航按钮在HeaderComponent上。这里有线索吗？

我不需要筑巢路线就能完成这个任务。但是，当用户移动到条形码页面时，我的仪表板组件就会损坏。所以我要避免那样做。这就是为什么我决定在这里采用筑巢路线模式。

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

Answer 1

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

您需要使用绝对路径，它可以通过在url前面添加斜杠(/)来完成。

现在，在您的代码中，dashboard组件具有<router-outlet>，barcode组件将加载到该标记中，因此在显示barcode组件html内容时，为了隐藏dashboard组件html代码，需要创建包含dashboard组件html内容的新组件，并为此做出如下路由。

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

论dashboard-routing.module.ts

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