要实现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懒加载路由的方法。