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

分享于 

3分钟阅读

Angular

  繁體

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


相关文章