Angular2 的懒加载模块和预加载模块的使用
Angular2 是一款现代化的前端开发框架，它提供了很多便利，其中之一便是懒加载模块和预加载模块。这两种模块的使用可以提高 Angular2 应用程序的性能，特别是对于大型应用程序来说。在这篇技术文章中，我们将深入了解 Angular2 的懒加载和预加载模块的使用，并提供详细的学习和指导意义。
什么是懒加载和预加载模块？
在传统的应用程序中，所有的模块都在应用程序启动时被加载。这意味着，如果我们的应用程序中有很多模块，那么启动应用程序的时间就是非常长的。为了解决这个问题，Angular2 提供了两种模块加载方式，一种是懒加载模块，另一种是预加载模块。
懒加载模块是指当应用程序运行时，只有当某些模块需要被使用时才被加载，而预加载模块则是在启动应用程序的同时，预加载一些模块，以便更快地启动后续操作。
使用懒加载模块
下面我们将深入讨论懒加载模块的使用。
- 创建懒加载模块
使用 Angular CLI 可以创建一个简单的懒加载模块，我们可以在终端中运行以下命令：
ng g module lazy --route lazy --module app.module.ts
这条命令将在应用程序根目录中创建一个名为 lazy 的模块，并且它有自己的路由，我们需要将这个懒加载模块连接到我们应用程序的主模块中。
- 让主应用程序支持懒加载
在 app.routing.ts 文件中，我们需要为懒加载的模块定义一个包含 loadChildren 属性的路由，这个属性告诉路由器去哪里寻找懒加载的模块。我们需要将它定义为一个相对路径，如下所示：
const appRoutes: Routes = [ { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' } ];
这将告诉路由器当用户访问 /lazy 路径时，应使用 loadChildren 渲染 lazy 模块。
- 创建组件以显示懒加载的模块
当懒加载模块被加载时，我们需要将其显示给用户。我们可以在我们的主应用程序中创建一个组件来渲染 lazy 模块的内容。在组件中使用带有 selector 的模板，这个 selector 需要被路由器引用。
import { Component } from '@angular/core'; @Component({ selector: 'app-lazy', template: '<router-outlet></router-outlet>' }) export class LazyComponent {}
在创建完 LazyComponent 后，我们需要在主应用程序的模板中引用该组件，如下所示：
<router-outlet></router-outlet>使用预加载模块
下面我们将讨论预加载模块的使用方法。
- 在主应用程序中启用预加载
首先，我们需要在主应用程序的路由器中启用预加载。在 app-routing.module.ts 文件中，我们需要引入一个新的服务：PreloadAllModules。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------- ----------------- - ---- ------------------ ------ - ------------ - ---- ------------------ ----- ---------- ------ - - - ----- ------- ------------- ------------------------------- - -- ----------- -------- - ------------------------------- - ------------------- ----------------- -- -- -------- - ------------ - -- ------ ----- ---------------- --展开代码
在示例代码中的 forRoot() 函数中使用一个 map，它的第二个参数传递 PreloadAllModules，这将启用预加载模块。
- 使用 routerLinkActive 指令
我们可以使用 routerLinkActive 指令来创建一个类似于活动链接的效果。当用户点击一条包含懒加载模块的链接时，Angular2 会自动预加载懒加载模块。
<a routerLink="/lazy" routerLinkActive="active">Go to lazy module</a>
这条指令告诉路由器，当用户点击链接并激活了该链接时，应该预加载懒加载的模块。
总结
在本文中，我们深入研究了 Angular2 的懒加载和预加载模块的使用。这两种方法可以大大提高 Angular2 应用程序的性能，特别是对于大型应用程序。我们提供了详细的学习和指导意义，并用示例代码进行了说明。使用这些技术，您可以构建更快、更可靠的 Angular2 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f8409cf6b2d6eab3060f47
