要在同一页上使用惰性加载加载多个模块,你可以按照以下步骤进行操作:
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
{ path: 'module1', loadChildren: './module1/module1.module#Module1Module' },
{ path: 'module2', loadChildren: './module2/module2.module#Module2Module' }
];
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
bootstrap: [AppComponent]
})
export class AppModule { }
// 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({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [Module1Component]
})
export class Module1Module { }
// module2.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { Module2Component } from './module2.component';
const routes: Routes = [
{ path: '', component: Module2Component }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [Module2Component]
})
export class Module2Module { }
在主模块中配置惰性加载的路由:将模块1和模块2的路径添加到主模块的路由配置中。
创建模块1和模块2的组件:这些组件将在相应的模块中使用。
// module1.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-module1',
template: 'Module 1
'
})
export class Module1Component { }
// module2.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-module2',
template: 'Module 2
'
})
export class Module2Component { }
Module 1
Module 2
现在,当你在浏览器中导航到/module1
时,将加载模块1并显示Module1Component的内容。当你导航到/module2
时,将加载模块2并显示Module2Component的内容。