在本教程中,通过示例Angular 6|7使用loadChildren()
方法路由和延迟加载组件。
Angular 6中的延迟加载模块允许应用程序仅在需要时才加载模块。这对Angular 6应用程序有很多好处,例如性能和大小。
创建Angular 6项目
我们假定你安装了Angular CLI 6,现在,你可以使用以下命令创建一个项目:
ng new angular6project
创建模块
现在我们需要使用以下命令创建一个模块:
$ ng g module lazymodule
我们还需要在feature模块内部创建组件:
$ ng g c lazymodule/component1
$ ng g c lazymodule/component2
$ ng g c lazymodule/component3
这些命令将生成lazymodule模块内部的三个组件。
使用loadChildren()
在主路由文件app-routing.module.ts
中,需要使用loadChildren()
方法延迟加载模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'lazymodule', loadChildren: './lazymodule/lazymodule.module#LazyModuleModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
loadChildren()
方法获取模块的路径,追加到#
,追加到模块的类名。
Feature 模块内部的路由组件
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';
import { Component3Component } from './component3/component3.component';
const routes: Routes = [
{ path: '', component: Component1Component },
{ path: 'component2', component: Component2Component },
{ path: 'component3', component: Component3Component },
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
declarations: [Component1Component,Component2Component,Component3Component]
})
export class LazyModuleModule {}
在 Feature 模块中,使用forChild()
RouterModule方法而不是forRoot()
方法。
相关文章