如何在 Angular 中实现延迟加载

Angular CLI 是一个命令行界面工具，可以创建项目、添加文件以及执行各种正在进行的开发任务，例如测试、捆绑和部署。

如果您需要更新 Angular CLI，您可以通过重新安装轻松更新。

npm install -g @angular/cli

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve --open

ng new 用于生成角度样板。

为了在 Angular 中实现延迟加载，我们需要创建一个路由模块和一个该组件的模块，如下图所示。

在上图中你看到了posts-routing.module.ts 和 posts.module.ts

现在让我们看看需要编写什么代码。

	import { NgModule } from "@angular/core";
	import { RouterModule, Routes } from "@angular/router";

	import { PostsComponent} from './posts.component'


	const routes: Routes = [
	{ path: "", component: PostsComponent},

	];

	@NgModule({
	exports: [RouterModule],
	imports: [RouterModule.forChild(routes)]
	})
	export class PostsRoutingModule { }

	import { NgModule } from "@angular/core";
	import { RouterModule, Routes } from "@angular/router";

	import { PostsComponent} from './posts.component'


	const routes: Routes = [
	{ path: "", component: PostsComponent},

	];

	@NgModule({
	exports: [RouterModule],
	imports: [RouterModule.forChild(routes)]
	})
	export class PostsRoutingModule { }

在第 14 行，我们需要指定为RouterModule.forChild而不是 root。

帖子.模块.ts

现在让我们看看 posts.module.ts

	import { NgModule } from "@angular/core";
	import { CommonModule } from "@angular/common";

	import {PostsRoutingModule } from "./posts-routing.module";
	import { PostsComponent } from "./posts.component";

	@NgModule({
	imports: [CommonModule, PostsRoutingModule],
	declarations: [PostsComponent]
	})
	export class PostsModule {}

	import { NgModule } from "@angular/core";
	import { CommonModule } from "@angular/common";

	import {PostsRoutingModule } from "./posts-routing.module";
	import { PostsComponent } from "./posts.component";

	@NgModule({
	imports: [CommonModule, PostsRoutingModule],
	declarations: [PostsComponent]
	})
	export class PostsModule {}

就这样，我们完成了儿童级别的任务。

现在我们需要在根级别（即应用程序文件夹内）创建一个文件 app-routing.module.ts。

就像我们如何在角度中创建路由一样。

	import { NgModule } from "@angular/core";
	import { RouterModule, Routes } from "@angular/router";
	import { HomeComponent } from "./home/home.component";

	const routes: Routes = [
	{
	path: "",
	component: HomeComponent
	},
	{
	path: "posts",
	loadChildren: "../app/posts/posts.module#PostsModule"
	},
	{
	path: "king",
	loadChildren: "../app/king/king.module#KingModule"
	}
	];

	@NgModule({
	imports: [RouterModule.forRoot(routes)],
	exports: [RouterModule],
	providers: []
	})
	export class AppRoutingModule {}

	import { NgModule } from "@angular/core";
	import { RouterModule, Routes } from "@angular/router";
	import { HomeComponent } from "./home/home.component";

	const routes: Routes = [
	{
	path: "",
	component: HomeComponent
	},
	{
	path: "posts",
	loadChildren: "../app/posts/posts.module#PostsModule"
	},
	{
	path: "king",
	loadChildren: "../app/king/king.module#KingModule"
	}
	];

	@NgModule({
	imports: [RouterModule.forRoot(routes)],
	exports: [RouterModule],
	providers: []
	})
	export class AppRoutingModule {}

在app.module.ts中，我们需要删除想要延迟加载的组件的声明。例如，我们已经在 posts.module.ts 中声明了 posts 组件。

应用程序.模块.ts

	import { BrowserModule } from "@angular/platform-browser";
	import { NgModule } from "@angular/core";
	import { FormsModule } from "@angular/forms";
	import {HttpModule} from '@angular/http';

	import { AppComponent } from "./app.component";


	import { AppRoutingModule } from ".//app-routing.module";



	@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, AppRoutingModule,FormsModule,HttpModule],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule {}

view raw app.module.ts hosted with ❤ by GitHub

	import { BrowserModule } from "@angular/platform-browser";
	import { NgModule } from "@angular/core";
	import { FormsModule } from "@angular/forms";
	import {HttpModule} from '@angular/http';

	import { AppComponent } from "./app.component";


	import { AppRoutingModule } from ".//app-routing.module";



	@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, AppRoutingModule,FormsModule,HttpModule],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule {}

view raw app.module.ts hosted with ❤ by GitHub

这是我们的最终输出

最初发表于reactgo.com