角度路由不显示子组件答案

【问题标题】：Angular routing does not show the child component角度路由不显示子组件
【发布时间】：2022-10-14 17:40:37
【问题描述】：

当我尝试访问 URL“funzioniUtenteBase/ricercaModulo”时，路径已到达，但我没有看到组件 RicercaModuloComponent。我注意到如果我在 home-utente-base-component.html 中添加“router-outlet”，则会显示 RicercaModuloComponent 但是这样我得到了 HomeUtenteBaseComponent 和 RicercaModuloComponent 组件的显示。相反，我希望 HomeUtenteBaseComponent 消失，只剩下 RicercaModuloComponent。

我该如何解决？谢谢你

应用程序路由.module.ts：

    const routes: Routes = [
  {
    path: "funzioniUtenteBase",
    loadChildren: () => import('./features/components/home-utente-base/home-utente-base.module').then(m => m.HomeUtenteBaseModule)
  },
  {
    path: "funzioniTecnicoDelegato",
    loadChildren: () => import('./features/components/home-tecnico-delegato/home-tecnico-delegato.module').then(m => m.HomeTecnicoDelegatoModule)
  },
  {
    path: "funzioniSupervisore",
    loadChildren: () => import('./features/components/home-supervisore/home-supervisore.module').then(m => m.HomeSupervisoreModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html：

<div
  class="layout-wrapper"
  [ngClass]="{'layout-menu-horizontal': 'horizontal'}">
  <div class="layout-main">
    <app-toolbar></app-toolbar>
    <app-breadcrumb></app-breadcrumb>
    <div class="layout-content">
      <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
  </div>
</div>

home-utente-base-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    component: HomeUtenteBaseComponent,
    children: [
      {
        path: 'ricercaModulo',
        component: RicercaModuloComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeUtenteBaseRoutingModule { }

主页-utente-base.component.ts：

<div class="ui-grid-fixed">
  <div class="formgrid grid">
    <div class="field col-12 md:col-3">
      <a
        class="square-box"
        routerLink="./ricercaModulo">
        <img src="./../../../../assets/layout/images/icon-cerca.svg">
        <p>Ricerca modulo</p>
      </a>
    </div>
  </div>
</div>

【问题讨论】：

标签： angular typescript redirect angular-router

【解决方案1】：

您只需要将两条路由定义为兄弟而不是父子关系，问题就应该得到解决。

const routes: Routes = [
  {
    path: '',
    component: HomeUtenteBaseComponent,
    pathMatch:'full',
  },
  {
    path: 'ricercaModulo',
    component: RicercaModuloComponent
  }
];

干杯

【讨论】：