Angular进阶之六:Progressive rendering
简介
Progressive Rendering 是一种提高 Web 应用性能的方法,允许页面在加载过程中逐步呈现,以提高用户体验。在本文中,我们将探讨如何在 Angular 中通过自定义指令实现 Progressive Rendering,特别是处理从服务器获取大量数据的场景。
目标
通过自定义指令将数据加载设计为异步操作,并在数据加载的同时允许页面逐步渲染,以提高用户对应用的感知。
步骤
1. 创建数据服务
首先,创建一个数据服务(例如 data.service.ts),用于模拟从服务器获取大量数据的异步操作。
// data.service.tsimport { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';@Injectable({providedIn: 'root'
})
export class DataService {getData(): Observable<string[]> {// 模拟从服务器获取大量数据return of(Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`));}
}
2. 创建自定义指令
创建一个自定义指令,通过@Directive 装饰器来标记,并包含一些属性和方法,结合依赖注入、生命周期钩子、渲染引擎等机制,实现对DOM元素的控制和增强。指令在模板中通过选择器标识,并通过属性绑定和输入属性传递数据,使得开发者能够轻松扩展和定制Angular应用的行为。
例如 ProgressiveRenderingDirective,该指令将异步加载数据并在数据加载的同时逐步渲染页面。
// progressiveRendering.directive.tsimport { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';@Directive({// selector 属性定义了在模板中如何标识和使用这个指令。例如,'*progressiveRendering' 表示这个指令可以通过属性选择器在元素上使用。 selector: '[progressiveRendering]'
})
export class ProgressiveRenderingDirective {constructor(// 用于表示指令所在元素的模板。指令所在元素的模板结构。通过TemplateRef,我们可以访问到包含在这个元素中的内容。private templateRef: TemplateRef<any>, // 用于表示指令所在元素的视图容器。这个容器可以包含一个或多个视图,并允许动态地添加、移除这些视图。private viewContainer: ViewContainerRef ) {}loading = true;dataSource: any = [];@Input() set progressiveRenderingLoading(loading: boolean) {this.loading = loading;}@Input() //@Input 装饰器定义输入属性,这样在模板中就可以通过属性绑定来传递值。set progressiveRenderingOf(list: any[]) { // 指令中定义与属性名相对应的 setter 方法,该方法会被调用。这个 setter 方法可以包含额外的逻辑,以响应属性值的变化。this.dataSource = list;if (this.loading) {this.viewContainer.clear();this.loadAsyncData();} else {this.viewContainer.createEmbeddedView(this.templateRef);}}private loadAsyncData() {// 异步加载数据this.dataSource.forEach((value: any, index: any) => {setTimeout(() => {this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: value, index: index })}, index * 100)});}
}
3. 在组件中使用指令
在你的 Angular 组件中使用刚刚创建的指令来实现 Progressive Rendering。
<!-- app.component.html -->
<!-- 简化前
<ng-template progressiveRendering let-value [progressiveRenderingOf]="asyncData"let-i="index"><div>{{ value }}</div>
</ng-template>
-->
<!-- * 也被称为结构指令,是一种将结构指令应用于元素的简写语法。它允许简化语法并使其更具可读性。-->
<div *progressiveRendering="let value of asyncData; loading">{{ value }}</div>
// app.component.tsimport { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {constructor(private dataService: DataService) {}asyncData: string[] = [];loading = true;ngOnInit(): void {this.dataService.getData().subscribe((data: string[]) => {this.asyncData = data;this.loading = false;});}
4. 运行应用
运行你的 Angular 应用,你将看到页面在加载过程中逐步呈现列表项,提高了用户对应用的感知。

结论
通过自定义指令将数据加载设计为异步操作,我们成功地实现了 Progressive Rendering,使得页面在数据加载的同时逐步呈现,提高了用户体验。自定义指令的方式使得我们可以更加灵活地控制页面的加载过程,以适应不同的需求和场景。在实际应用中,可以根据具体的情况进一步扩展和优化。
相关文章:
Angular进阶之六:Progressive rendering
简介 Progressive Rendering 是一种提高 Web 应用性能的方法,允许页面在加载过程中逐步呈现,以提高用户体验。在本文中,我们将探讨如何在 Angular 中通过自定义指令实现 Progressive Rendering,特别是处理从服务器获取大量数据的…...
机器人中的数值优化之线性共轭梯度法
欢迎大家关注我的B站: 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 本文ppt来自深蓝学院《机器人中的数值优化》 目录 1.无约束优化方法对比 2.Hessian-vec product 3.线性共轭梯度方法的步长编辑 4.共轭梯度…...
嵌入式Linux C语言介绍
目录 一.前言 二.C语言的特点 一.前言 开发工具通常依赖于操作系统提供的各种功能和服务。许多开发工具都基于操作系统的API(应用程序接口)进行开发,这些API提供了文件处理、网络通信、图形界面等核心功能。没有操作系统的支持,…...
基于Java电影院票票务系统
基于Java电影院票票务系统 功能需求 1、用户登录与注册:用户可以通过系统注册账号并登录系统,方便进行购票和管理个人信息。 2、个人信息管理:用户可以查看和修改个人信息,包括姓名、联系方式等。 3、影片信息查询:…...
HarmonyOS应用开发实战—开箱即用的登录页面3【ArkTS】
文章目录 一.HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】【鸿蒙专栏-31】1.1 项目背景1.2 ArkTS详解二.HarmonyOS应用开发实战—开箱即用的登录页面3【ArkTS】2.1 ArkTS页面源码2.2 代码解析2.3 心得一.HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】【鸿蒙专…...
Unity坦克大战开发全流程——1)需求分析
实践项目:需求分析 该游戏共有三个主要部分:UI、数据储存、核心游戏逻辑,下面我们将从开始场景、游戏场景、结束场景三个角度切入进行分析。...
python练习2【题解///考点列出///错题改正】
一、单选题 【文件】 *1.【单选题】 ——文件:读取方法 下列哪个选项可以从文件中读取任意字节的内容?(C )A A.read() B.readline() C.readlines() D.以上全部 A\B\C三种方法都是可以读取文件中任意的字节内容的࿰…...
7.2 uvm_resource_db in UVM
uvm_resource_db是一个类型参数化 type-parameterized的类,它是资源数据库顶部的一个方便层(convenience layer)。这个便利层简化了对低级数据库的访问,并且没有添加新功能。因此,uvm_resource_db不是从uvm_resource类派生的。以下uvm_resour…...
洛谷——P3879 [TJOI2010] 阅读理解(STL:hash+set,c++)
文章目录 一、题目[TJOI2010] 阅读理解题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 二、题解基本思路:代码 一、题目 [TJOI2010] 阅读理解 题目描述 英语老师留了 N N N 篇阅读理解作业,但是每篇英文短文都有很多生词需要查字典&am…...
Windows/Linux环境登入mysql、mysqldump命令等多方式解决方案之简易记录
Windows/Linux环境登入mysql、mysqldump命令等多方式解决方案之简易记录 之前发布过Window方式,这次结合以上主题,完善下Linux相关登入方式过程,纯属做个记录,有需要的朋友可以做个学习参考。 一、Windows环境提示“‘mysql’ 不是内部或外部命令,也不是可运行的程序或批…...
【基础】【Python网络爬虫】【13.免费代理与付费代理】(附大量案例代码)(建议收藏)
Python网络爬虫基础 一、免费代理1. 什么是代理IP2. 代理IP的类型3. 代理IP的作用4. 免费代理的潜在风险5. 免费代理网站 二、付费代理1. 找付费代理服务站点2. 生成获取代理的api接口3. python获取代理请求接口示例数据返回示例 4. 解决请求速率5. 品易代理使用注意事项代理添…...
【 YOLOv5】目标检测 YOLOv5 开源代码项目调试与讲解实战(3)-训练yolov5模型(本地)
训练yolov5模型(本地) 训练文件 train.py训练如下图 一些参数的设置weights:对于weight参数,可以往Default参数中填入的参数有 cfg:(缩写)cfg参数可以选择的网络模型 data对于data hyp 超参数epochs 训练多…...
fastApi 项目部署
方式一,Uvicorn部署 Run a Server Manually - Uvicorn - FastAPI 1,linux服务器安装 python>3.8 2,安装 uvicorn : pip install "uvicorn[standard]" 3,上传项目到服务器 main.py from typing imp…...
python操作mysql数据库
说明:这里仅仅为了演示python操作MySQL数据库,真实环境中,最好把CURD分别封装为对应的方法。并将这些方法在类中封装,体现python面向对象的特征。python链接MySQL数据库 建表 create database mydb; use mydb; create table EMP…...
Redis6.0 Client-Side缓存是什么
前言 Redis在其6.0版本中加入了Client-side caching的支持,开启该功能后,Redis可以将指定的key-value缓存在客户端侧,这样当客户端发起请求时,如果客户端侧存在缓存,则无需请求Redis Server端。 Why Client-side Cac…...
Leetcode—1572.矩阵对角线元素的和【简单】
2023每日刷题(七十三) Leetcode—1572.矩阵对角线元素的和 实现代码 class Solution { public:int diagonalSum(vector<vector<int>>& mat) {int n mat.size();if(n 1) {return mat[0][0];}int sum 0;int i 0, j n - 1;while(i &…...
基于SpringBoot的二手手机商城系统的设计与实现
文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的二手手机商城系统的设计…...
OpenFeign相关面试题及答案
1、什么是OpenFeign,它如何简化远程服务调用? OpenFeign是一个声明式的Web服务客户端,它使得编写HTTP客户端变得更加容易。它属于Spring Cloud Netflix项目的一部分,可以与Spring Boot应用轻松集成。通过使用OpenFeign࿰…...
c盘扩容时,d盘无法删除卷问题
C盘扩容时,磁盘管理中D盘右键无法删除卷的原因 首先,D盘下文件夹为空,但是显示可用空间不是100%,经过排查,发现是虚拟内存设置在了D盘导致无法删除卷,这里只需要将虚拟内存放到其他盘,如E盘即可…...
NumPy 中级教程——广播(Broadcasting)
Python NumPy 中级教程:广播(Broadcasting) 在 NumPy 中,广播是一种强大的机制,它允许不同形状的数组在进行操作时,自动进行形状的调整,使得它们能够完成一致的运算。广播使得对数组的操作更加…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要: 近期,在使用较新版本的OpenSSH客户端连接老旧SSH服务器时,会遇到 "no matching key exchange method found", "n…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

