為什么Angular 11中的延遲加載組件是在新頁面中加載的，而不是在側邊欄右側的主頁中？

Question

我有幾個模塊，我想稱之為惰性。

在我的項目中，我有一個儀表板模塊，它的組件在成功登錄后加載。

這行得通。

在這個模塊中，我有更多的子模塊。 例如概覽。

我已經建立了一個簡單的側邊欄。 單擊鏈接概覽時，模塊概覽應加載到側邊欄右側的主視圖中。

但不幸的是，它被加載到一個新頁面中。 即側邊欄不再可見，而只有概覽模塊的視圖。

我希望這是可以理解的

我的代碼：

app.module.ts：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    AuthModule,
    CommonModule,
    HttpClientModule,
    DashboardModule,

    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

應用程序路由.modules.ts：

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/login'
  },
  {
    path: 'login',
    component: LoginComponent,
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  }

];

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

儀表板.module.ts：

@NgModule({
  declarations: [
    DashboardComponent

  ],
  imports: [
    CommonModule,
    CoreModule,
    DashboardRoutingModule,
  ]
})
export class DashboardModule { }

儀表板-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent
  },
  {
    path: 'overview',
    component: OverviewComponent
    // loadChildren: () => import('./overview/overview.module').then(m => m.OverviewModule)
  },
  {
    path: 'mandants',
    component: MandantsComponent

    // loadChildren: () => import('./mandants/mandants.module').then(m => m.MandantsModule)
  },
];

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

概述.module.ts：

@NgModule({
  declarations: [
    OverviewComponent
  ],
  imports: [
    CommonModule,
    OverviewRoutingModule
  ]
})
export class OverviewModule { }

概述-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    component: OverviewComponent
  }
];

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

儀表板.component.html：

<app-header></app-header>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <app-sidebar></app-sidebar>
    </div>
    <div class="col-md-10" id="test">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

app.component.html：

<router-outlet></router-outlet>

sidebar.component.ts：

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

sidebar.component.html：

<div class="wrapper">
  <!-- Sidebar -->
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>Cockpit</h3>
    </div>
    <ul class="list-unstyled components">
      <li class="active">
        <a class="nav-link" routerLink="/overview">Übersicht</a>
      </li>
      <li class="active">
        <a class="nav-link" routerLink="/mandants">Mandanten</a>
      </li>
    </ul>
  </nav>
</div>

側邊欄組件加載在core.modules.ts 中：

@NgModule({
  declarations: [
    HeaderComponent,
    SidebarComponent,
  ],
  imports: [
    CommonModule,
    RouterModule
  ],
  exports: [
    HeaderComponent,
    SidebarComponent
  ]
})
export class CoreModule { }

我剛剛開始學習 angular，因此仍然是初學者。

有誰知道我在這里做錯了什么？

如果您需要更多信息，請告訴我。

Answer 1

在 app-routing-module.ts 中，“儀表板”路徑應配置為儀表板模塊，以便啟用儀表板路由模塊。 您可以在儀表板路由模塊中延遲加載概覽模塊和 Mandants 模塊。

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/login'
  },
  {
    path: 'login',
    component: LoginComponent,
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }

];

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