在Angular 7中,可以使用懒加载来延迟加载模块,以提高应用程序的性能。下面是一个简单的代码示例,展示了如何在Angular 7中使用懒加载。
首先,创建一个名为lazy.module.ts
的新模块文件,该文件将包含要延迟加载的组件。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [LazyComponent],
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: LazyComponent }
])
]
})
export class LazyModule { }
接下来,创建一个名为lazy.component.ts
的新组件文件,该文件将包含懒加载模块的组件。
import { Component } from '@angular/core';
@Component({
selector: 'app-lazy',
template: 'Lazy Component
'
})
export class LazyComponent { }
现在,打开应用的路由配置文件(通常是app-routing.module.ts
),并将懒加载模块添加到路由配置中。
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 { }
在上面的代码中,我们使用loadChildren
属性来指定要懒加载的模块路径。路由器将根据需要加载该模块。
最后,在应用的根模块(app.module.ts
)中,将AppRoutingModule
添加到imports
数组中。
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 7中实现懒加载的基本步骤和示例代码。通过懒加载,可以按需加载模块,提高应用的性能和加载速度。