要实现Angular的懒加载路由,可以使用loadChildren
属性。loadChildren
属性允许我们在需要时动态加载模块。
以下是一个示例:
首先,在路由模块中定义懒加载路由:
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 { }
在上面的示例中,我们定义了一个懒加载路由,当访问路径为/lazy
时,将动态加载LazyModule
模块。
接下来,在LazyModule
中定义相应的组件和路由:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';
const routes: Routes = [
{ path: '', component: LazyComponent }
];
@NgModule({
declarations: [LazyComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class LazyModule { }
在上面的示例中,我们定义了一个空路径的路由,该路由将使用LazyComponent
作为组件。
最后,在需要加载懒加载路由的地方使用
标记:
Lazy
通过以上步骤,当我们访问/lazy
路径时,Angular将动态加载LazyModule
模块,并在
标记中渲染LazyComponent
组件。
这就是使用loadChildren
属性实现Angular懒加载路由的方法。