我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Angular实现预加载延迟模块的方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Angular实现预加载延迟模块的方法

Angular实现预加载延迟模块的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。

我们可以通过预加载路由来修复这个问题。路由可以在用户与其它部分交互的时候,异步加载延迟的模块。这可以使用户在访问延迟模块的时候更快地访问。

本文将在上一个示例的基础上,增加预加载的功能。

在上一节中,我们的根路由定义在 main.routing.ts,我们在 app.module.ts 中使用了根路由定义。

需要注意的是,Home 组件是提前加载的。我们将在系统启动之后渲染这个组件。

在 Angular 渲染 Home 组件之后,用户就可以与应用交互了,我们可以通过简单的配置在后台预加载其它模块。

启用预加载

我们在 forRoot 函数中,提供一个预加载的策略。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadAllModules } from '@angular/router';

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

这个 PreloadAllModules 策略来自 @angular/router,所以我们还需要导入它。

定制预加载策略

router 包中预定义了两个策略:

  1. 不预加载 NoPreloading

  2. 预加载所有模块 PreloadAllModules

5 秒之后加载模块

但是,您可以自己定义一个定制的策略。这比您想的要更为简单。例如,您希望在应用初始化 5 秒之后加载其余的模块。

您需要实现接口 PreloadingStrategy,我们定义一个 CustomPreloadingStrategy 的自定义策略类。

import { Route } from '@angular/router';
import { PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs/Rx';

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
    return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
  }
}

然后,修改 app.module.ts 使用这个自定义策略。需要注意的是,您还需要在 propers 中添加这个类。以实现依赖注入。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { CustomPreloadingStrategy } from './preload';

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
 ],
 providers: [CustomPreloadingStrategy ],
 bootstrap: [AppComponent]
})
export class AppModule { }

你会看到 在 5 秒钟之后,这个功能模块被自动加载了。

Angular实现预加载延迟模块的方法

加载指定模块

我们还可以在路由中定义附加的参数来指定哪些模块进行预加载,我们使用路由定义中的 data 来提供这个附加的数据。

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule', data: {preload: true} },
  { path: '**', component: HomeComponent }
];

然后,我们定义新的加载策略。

import { Observable } from 'rxjs/Rx';
import { PreloadingStrategy, Route } from '@angular/router';

export class PreloadSelectedModules implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : Observable.of(null);
  }
}

最后,在 app.module.ts 中使用这个策略。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadSelectedModules } from './preload.module';

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadSelectedModules })
 ],
 providers: [PreloadSelectedModules ],
 bootstrap: [AppComponent]
})
export class AppModule { }

此时,可以看到,模块直接被预加载了。即使您点击链接,也不会再有新的请求发生。

Angular实现预加载延迟模块的方法

感谢各位的阅读!看完上述内容,你们对Angular实现预加载延迟模块的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Angular实现预加载延迟模块的方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

MyBatis ORM的延迟加载实现原理

MyBatis ORM(Object Relational Mapping,对象关系映射)是一种常用的数据库操作技术,它可以将数据库表中的数据映射到Java对象上。在MyBatis中,延迟加载(Lazy Loading)是一种优化策略,用于
MyBatis ORM的延迟加载实现原理
2024-09-16

CSS属性实现响应式图片延迟加载的方法

CSS属性实现响应式图片延迟加载的方法在网页开发中,经常会遇到需要加载大量图片的情况,特别是在移动设备上。为了提高页面的加载速度和用户体验,延迟加载(lazy loading)图像成为一种常见的优化方法。延迟加载是指在页面加载时,只加载可见
CSS属性实现响应式图片延迟加载的方法
2023-11-18

请谈谈PHP中的自动加载和延迟加载。(PHP自动加载和延迟加载的实现原理是什么?)

PHP自动加载在需要时加载类,减少启动时间和内存开销。它使用__autoload()函数,或自定义自动加载器实现。延迟加载仅在特定条件下加载类,通过回调函数或第三方库实现。这些技术优化加载时间和内存使用率,但有潜在性能开销和调试困难。最佳实践是仅在必要时使用它们,并仔细考虑性能影响。
请谈谈PHP中的自动加载和延迟加载。(PHP自动加载和延迟加载的实现原理是什么?)
2024-04-02

Entity Framework Core延迟加载的方法怎么使用

本文小编为大家详细介绍“Entity Framework Core延迟加载的方法怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Entity Framework Core延迟加载的方法怎么使用”文章能帮助大家解决疑惑,下面跟着小编的
2023-06-29

C++实现延迟的方法详解

这篇文章主要为大家详细介绍了C++实现延迟的三个方法,文中的示例代码讲解详细,对我们深入了解C++有一定的帮助,感兴趣的小伙伴可以学习一下
2022-12-27

python中动态加载模块和类方法实现

python中动态加载模块和类方法实现测试代码 文件名: mytest.py 具体代码如下: 注意:模块名,类名,方法名都是变量。 #coding=UTF-8class TestClass: def sub(self,a,b):
2023-01-31

MyBatis的延迟加载,你知道是怎么实现的么?

延迟加载也称为懒加载、惰性加载,使用延迟加载可以提高程序的运行效率,针对数据持久层的操作,在某些特定查询的情况下去访问特定的数据库,在其他情况下可以不访问某些数据表,尽量减少 SQL 的执行,从而达到提高速度的目的,是对数据库操作的一种优化

Android实现延迟的几种方法小结

本文实例总结了Android实现延迟的几种方法。分享给大家供大家参考,具体如下: 一、通过Threadnew Thread(){ public void run(){ sleep(***); } }.start();通过ProgressDi
2022-06-06

Java 中实现延迟执行的方法有哪些?(java延迟执行的方法是什么)

在Java编程中,延迟执行是一种常见的需求,它允许我们在特定的时间或条件满足后才执行某个代码块或任务。以下是一些在Java中实现延迟执行的常用方法:一、使用Thread.sleep()方法Thread.s
Java 中实现延迟执行的方法有哪些?(java延迟执行的方法是什么)
Java2024-12-19

举例讲解iOS中延迟加载和上拉刷新/下拉加载的实现

lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动经过了,图片就开始加载了,这样用户体
2022-06-02

Redis实现延迟队列的方法是什么

这篇文章主要介绍“Redis实现延迟队列的方法是什么”,在日常操作中,相信很多人在Redis实现延迟队列的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Redis实现延迟队列的方法是什么”的疑惑有所
2023-07-05

Java实现异步延迟队列的方法详解

目前系统中有很多需要用到延时处理的功能,本文就为大家介绍了Java实现异步延迟队列的方法,文中的示例代码讲解详细,需要的可以参考一下
2023-03-22

编程热搜

目录