为啥 Angular 11 中的延迟加载组件是在新页面中加载的，而不是在侧边栏右侧的主页面中？

Posted 2023-02-19

【中文标题】为啥 Angular 11 中的延迟加载组件是在新页面中加载的，而不是在侧边栏右侧的主页面中？

【英文标题】：Why the lazy loaded component in Angular 11 is loaded in a new page, not in the main page to the right of the sidebar?为什么 Angular 11 中的延迟加载组件是在新页面中加载的，而不是在侧边栏右侧的主页面中？

【发布时间】：2021-08-06 00:06:07

【问题描述】：

我有几个模块我想称之为惰性。

在我的项目中，我有一个仪表板模块，它的组件在成功登录后加载。

这行得通。

在这个模块中，我有更多的子模块。例如概览。

我已经建立了一个简单的侧边栏。单击链接概览时，模块概览应加载到侧边栏右侧的主视图中。

但不幸的是，它被加载到一个新页面中。 IE。侧边栏不再可见，只有概览模块的视图。

希望可以理解

我的代码：

app.module.ts:

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

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

app-routing.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  

dashboard.module.ts:

@NgModule(
  declarations: [
    DashboardComponent

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

dashboard-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  

overview.module.ts:

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

overview-routing.module.ts:

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

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

dashboard.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，因此仍然是初学者。

有人知道我在这里做错了什么吗？

如果您需要更多信息，请告诉我。

【问题讨论】：

这是一个简单的解决方案。检查我的 Stackblitz：stackblitz.com/edit/…

【参考方案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  

【讨论】：

不幸的是，即使现在来自 DashboardModule 的组件也加载到新页面中，而不是在侧边栏旁边

你能告诉我你是如何路由到 中的概览的吗？路径应该是“/dashboard/overview”。

在sidebar.component.html中，routerLink应该是“/dashboard/overview”：Übersicht .

还要确保“”只存在于 app.componet.html 和 dashboard.component.html

也许你可以在 stackblitz 中分享你的代码？