Angular中的懒加载模块是一种将模块分割成独立的代码块,并在需要时按需加载的技术。这样可以减少初始加载时间,提高应用性能。
下面是一个示例,展示了如何在Angular中实现懒加载模块,并共享内部流程。
lazy.module.ts
,其中包含共享的内部流程。import { NgModule } from '@angular/core';
@NgModule({
declarations: [/* 共享的组件和指令 */],
exports: [/* 共享的组件和指令 */],
})
export class LazyModule {
constructor() {
console.log('Lazy module initialized');
}
// 共享的内部流程
sharedProcess() {
console.log('Shared process');
}
}
lazy-routing.module.ts
,用于在需要时按需加载懒加载模块。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';
const routes: Routes = [
{ path: '', component: LazyComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LazyRoutingModule { }
lazy.component.ts
。import { Component } from '@angular/core';
@Component({
selector: 'app-lazy',
template: `
Lazy Component
`,
})
export class LazyComponent {
constructor(private lazyModule: LazyModule) { }
sharedProcess() {
this.lazyModule.sharedProcess();
}
}
app-routing.module.ts
中配置懒加载模块。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
中导入主路由模块。import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当访问路由路径 /lazy
时,Angular会按需加载懒加载模块,并显示其中的组件。单击“Shared Process”按钮时,会调用懒加载模块中的共享流程方法。
请注意,懒加载模块的路由配置需要在主路由模块中进行定义,并且在根模块中导入主路由模块。这样,Angular才能正确地按需加载懒加载模块。