angular 6|7路由器：延迟加载模块教程（ loadChildren ()示例）

在本教程中，通过示例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()方法。