如何在垫侧导航内容内的角度添加延迟加载的模块？

Question

在角度应用程序中如何在垫侧导航内容中添加延迟加载的模块/旋转？

Answer 1

您可以为侧导航内容使用角度模块，该内容可以轻松延迟加载，并且每个模块可以有自己的路径。

示例执行可能如下所示：

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: 'module1',
        loadChildren: () => import('./module1/module1.module').then(m => m.Module1Module)
      },
      {
        path: 'module2',
        loadChildren: () => import('./module2/module2.module').then(m => m.Module2Module)
      }
      // Add more lazy-loaded modules as needed
    ]
  }
];

然后在 HTML 中，您可以加载这些路由：

<!-- main-layout.component.html -->
<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <!-- Sidenav content -->
    <mat-nav-list>
      <a mat-list-item routerLink="/module1">Module 1</a>
      <a mat-list-item routerLink="/module2">Module 2</a>
    </mat-nav-list>
  </mat-sidenav>
  
  <mat-sidenav-content>
    <!-- This is where your lazy-loaded content will appear -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

您的每个模块可能不同，并且可以有不同的路由，这些路由可以在模块的每个路由部分中定义。像这样：

// module1.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { Module1Component } from './module1.component';

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

@NgModule({
  declarations: [Module1Component],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class Module1Module { }

只要确保您在正确的部分加载正确的模块，这应该可以工作。