Angular 7 中的惰性加载是一种优化技术,用于将应用程序的模块分割为更小的、独立的代码块,并在需要时动态加载这些代码块。这样可以减小初始加载时间,提高应用程序的性能。以下是一个示例,演示如何使用惰性加载。
首先,我们需要创建一个需要惰性加载的模块。在这个例子中,我们将创建一个名为 LazyModule
的模块。
创建 lazy.module.ts
文件,并在其中定义 LazyModule
模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy.component';
import { LazyRoutingModule } from './lazy-routing.module';
@NgModule({
imports: [
CommonModule,
LazyRoutingModule
],
declarations: [LazyComponent]
})
export class LazyModule { }
接下来,我们需要创建一个路由模块,并在其中定义一个路由,以便在需要时加载 LazyModule
。
创建 lazy-routing.module.ts
文件,并在其中定义 LazyRoutingModule
路由模块:
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 { }
接下来,我们需要在主应用程序模块中定义一个路由,用于加载 LazyModule
。
打开 app-routing.module.ts
文件,并在其中定义一个路由,以便在需要时加载 LazyModule
。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'lazy',
loadChildren: './lazy/lazy.module#LazyModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
最后,我们需要在主应用程序模块中加载 AppRoutingModule
路由模块。
打开 app.module.ts
文件,并在其中加载 AppRoutingModule
路由模块。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当用户访问 /lazy
路径时,Angular 7 将动态加载 LazyModule
模块,并显示 LazyComponent
组件。
希望这个示例能帮助你理解 Angular 7 中的惰性加载。