当前位置: 首页 > 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;使得它们能够完成一致的运算。广播使得对数组的操作更加…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...