当前位置: 首页 > news >正文

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 应用性能的方法&#xff0c;允许页面在加载过程中逐步呈现&#xff0c;以提高用户体验。在本文中&#xff0c;我们将探讨如何在 Angular 中通过自定义指令实现 Progressive Rendering&#xff0c;特别是处理从服务器获取大量数据的…...

机器人中的数值优化之线性共轭梯度法

欢迎大家关注我的B站&#xff1a; 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 本文ppt来自深蓝学院《机器人中的数值优化》 目录 1.无约束优化方法对比 2.Hessian-vec product 3.线性共轭梯度方法的步长​编辑 4.共轭梯度…...

嵌入式Linux C语言介绍

目录 一.前言 二.C语言的特点 一.前言 开发工具通常依赖于操作系统提供的各种功能和服务。许多开发工具都基于操作系统的API&#xff08;应用程序接口&#xff09;进行开发&#xff0c;这些API提供了文件处理、网络通信、图形界面等核心功能。没有操作系统的支持&#xff0c;…...

基于Java电影院票票务系统

基于Java电影院票票务系统 功能需求 1、用户登录与注册&#xff1a;用户可以通过系统注册账号并登录系统&#xff0c;方便进行购票和管理个人信息。 2、个人信息管理&#xff1a;用户可以查看和修改个人信息&#xff0c;包括姓名、联系方式等。 3、影片信息查询&#xff1a…...

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)需求分析

实践项目&#xff1a;需求分析 该游戏共有三个主要部分&#xff1a;UI、数据储存、核心游戏逻辑&#xff0c;下面我们将从开始场景、游戏场景、结束场景三个角度切入进行分析。...

python练习2【题解///考点列出///错题改正】

一、单选题 【文件】 *1.【单选题】 ——文件&#xff1a;读取方法 下列哪个选项可以从文件中读取任意字节的内容&#xff1f;&#xff08;C &#xff09;A A.read() B.readline() C.readlines() D.以上全部 A\B\C三种方法都是可以读取文件中任意的字节内容的&#xff0…...

7.2 uvm_resource_db in UVM

uvm_resource_db是一个类型参数化 type-parameterized的类&#xff0c;它是资源数据库顶部的一个方便层(convenience layer)。这个便利层简化了对低级数据库的访问&#xff0c;并且没有添加新功能。因此&#xff0c;uvm_resource_db不是从uvm_resource类派生的。以下uvm_resour…...

洛谷——P3879 [TJOI2010] 阅读理解(STL:hash+set,c++)

文章目录 一、题目[TJOI2010] 阅读理解题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 二、题解基本思路&#xff1a;代码 一、题目 [TJOI2010] 阅读理解 题目描述 英语老师留了 N N N 篇阅读理解作业&#xff0c;但是每篇英文短文都有很多生词需要查字典&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模型&#xff08;本地&#xff09; 训练文件 train.py训练如下图 一些参数的设置weights:对于weight参数&#xff0c;可以往Default参数中填入的参数有 cfg&#xff1a;&#xff08;缩写&#xff09;cfg参数可以选择的网络模型 data对于data hyp 超参数epochs 训练多…...

fastApi 项目部署

方式一&#xff0c;Uvicorn部署 Run a Server Manually - Uvicorn - FastAPI 1&#xff0c;linux服务器安装 python>3.8 2&#xff0c;安装 uvicorn : pip install "uvicorn[standard]" 3&#xff0c;上传项目到服务器 main.py from typing imp…...

python操作mysql数据库

说明&#xff1a;这里仅仅为了演示python操作MySQL数据库&#xff0c;真实环境中&#xff0c;最好把CURD分别封装为对应的方法。并将这些方法在类中封装&#xff0c;体现python面向对象的特征。python链接MySQL数据库 建表 create database mydb; use mydb; create table EMP…...

Redis6.0 Client-Side缓存是什么

前言 Redis在其6.0版本中加入了Client-side caching的支持&#xff0c;开启该功能后&#xff0c;Redis可以将指定的key-value缓存在客户端侧&#xff0c;这样当客户端发起请求时&#xff0c;如果客户端侧存在缓存&#xff0c;则无需请求Redis Server端。 Why Client-side Cac…...

Leetcode—1572.矩阵对角线元素的和【简单】

2023每日刷题&#xff08;七十三&#xff09; 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&#xff0c;它如何简化远程服务调用&#xff1f; OpenFeign是一个声明式的Web服务客户端&#xff0c;它使得编写HTTP客户端变得更加容易。它属于Spring Cloud Netflix项目的一部分&#xff0c;可以与Spring Boot应用轻松集成。通过使用OpenFeign&#xff0…...

c盘扩容时,d盘无法删除卷问题

C盘扩容时&#xff0c;磁盘管理中D盘右键无法删除卷的原因 首先&#xff0c;D盘下文件夹为空&#xff0c;但是显示可用空间不是100%&#xff0c;经过排查&#xff0c;发现是虚拟内存设置在了D盘导致无法删除卷&#xff0c;这里只需要将虚拟内存放到其他盘&#xff0c;如E盘即可…...

NumPy 中级教程——广播(Broadcasting)

Python NumPy 中级教程&#xff1a;广播&#xff08;Broadcasting&#xff09; 在 NumPy 中&#xff0c;广播是一种强大的机制&#xff0c;它允许不同形状的数组在进行操作时&#xff0c;自动进行形状的调整&#xff0c;使得它们能够完成一致的运算。广播使得对数组的操作更加…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

【大模型】RankRAG:基于大模型的上下文排序与检索增强生成的统一框架

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理&#xff1a;检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目&#xff1a;RankRAG&#xff1a;Unifying Context Ranking…...

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

以太网PHY布局布线指南

1. 简介 对于以太网布局布线遵循以下准则很重要&#xff0c;因为这将有助于减少信号发射&#xff0c;最大程度地减少噪声&#xff0c;确保器件作用&#xff0c;最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查 首先检查DRC规则是否设置正确&#xff0c;然…...