在 Angular 中使用 Renderer2

Renderer2 类

Renderer2 类是 Angular 提供的一个抽象服务,允许在不直接操作 DOM 的情况下操纵应用程序的元素。这是推荐的方法,因为它使得更容易开发可以在没有 DOM 访问权限的环境中渲染的应用程序,比如在服务器上、在 Web Worker 中或在原生移动端。

基本用法

通常会在自定义指令中经常使用 Renderer2,因为 Angular 指令是修改元素的逻辑构建块。以下是一个简单的示例,使用 Renderer2 的 addClass 方法向具有该指令的元素添加 wild 类:

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';@Directive({selector: '[appGoWild]'
})
export class GoWildDirective implements OnInit {constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {this.renderer.addClass(this.el.nativeElement, 'wild');}
}

现在,您可以在模板中向元素添加该指令,渲染时将添加 wild 类:

<h1 appGoWild>Hello World!
</h1>
<!-- <h1 class="wild">Hello World!</h1> -->

您可以看到,总体上使用 Renderer2 并不比直接操作 DOM 更复杂。现在让我们来看一些最有用的方法:

createElement / appendChild / createText

创建新的 DOM 元素并将它们附加到其他元素中。在这个例子中,我们创建一个新的 div 和一个文本节点。然后我们将文本节点放入我们的新 div 中,最后将我们的 div 添加到我们指令引用的元素中:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {const div = this.renderer.createElement('div');const text = this.renderer.createText('Hello world!');this.renderer.appendChild(div, text);this.renderer.appendChild(this.el.nativeElement, div);
}

我们的模板在渲染后将如下所示,假设我们在一个 article 元素上应用了该指令:

<article><div>Hello world!</div>
</article>

setAttribute / removeAttribute

使用 setAttribute 或 removeAttribute 来设置或移除属性:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
}

addClass / removeClass

要添加类,可以执行以下操作:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {this.renderer.addClass(this.el.nativeElement, 'wild');
}

我们在上面的示例中已经介绍了 addClass。至于 removeClass,只需提供元素引用和要移除的类名:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {this.renderer.removeClass(this.el.nativeElement, 'wild');
}

setStyle / removeStyle

使用 setStyle 使用 Renderer2 添加内联样式:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {this.renderer.setStyle(this.el.nativeElement,'border-left','2px dashed olive');
}

…并使用 removeStyle 来移除它:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}

setProperty

通过以下示例,您可以在图像元素上设置 alt 属性:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
}

…或设置输入字段的值:

// ...ngOnInit() {this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator');
}

😄 这就结束了我们的概述。请参考 API 文档以获取可用方法的完整列表。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/716325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java如何剪切视频

背景&#xff1a;如何使用Java批量切割视频 FFmpeg 是一个强大的开源多媒体处理工具&#xff0c;被广泛应用于音视频的录制、转码、编辑等方面。它支持几乎所有主流的音视频格式&#xff0c;能够在各种操作系统平台上运行&#xff0c;包括 Windows、macOS 和 Linux。FFmpeg 提…

nginx,php-fpm

一&#xff0c;Nginx是异步非阻塞多进程&#xff0c;io多路复用 1、master进程&#xff1a;管理进程 master进程主要用来管理worker进程&#xff0c;具体包括如下4个主要功能&#xff1a; &#xff08;1&#xff09;接收来自外界的信号。 &#xff08;2&#xff09;向各worker进…

SAP PP学习笔记04 - BOM2 -通过Serial来做简单的BOM变式配置,副明细,BOM状态,BOM明细状态,项目种类,递归BOM

本章继续讲BOM。 本章讲通过Serial来做简单的BOM变式配置。还讲了BOM的相关概念&#xff1a;副明细&#xff0c;BOM状态&#xff0c;BOM明细状态&#xff0c;项目种类&#xff0c;递归BOM 等。 1&#xff0c;通过Serial&#xff08;序列号&#xff09;来做简单的 VC&#xff0…

spring自定义注解之-ElementType.METHOD方法级注解声明

自定义注解类型和常用场景 可以参考之前的文章 &#xff1a; ElementType.FIELD字段级注解声明 如果在项目中&#xff0c;多处地方都需调用到同一个方法进行逻辑处理&#xff0c;且与方法的业务逻辑无关&#xff0c;比如监控&#xff0c;日志等&#xff0c;则可用自定义的方法…

【JavaSE】面向对象——继承性

继承性 继承性的概念 所谓继承&#xff0c;就是程序猿在保持原有类特性的基础上进行扩展&#xff0c;增加新功能&#xff0c;这样的类被称为派生类或者子类&#xff0c;原有类被称为超类或者基类。 在对于继承性概念进行书写前&#xff0c;我曾查阅许多资料来保证对其表达的…

Some collections -- 2024.3

一、TensorFlow Android (dataset: Mnist) We used TensorFlow to define and train our machine learning model, which can recognize handwritten numbers, called a number classifier model in machine learning terminology. We transform the trained TensorFlow mod…

C++学习第五天(内存管理)

1、内存分布 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)malloc(sizeof(int) * 4);int…

2024.03.01作业

1. 基于UDP的TFTP文件传输 #include "test.h"#define SER_IP "192.168.1.104" #define SER_PORT 69 #define IP "192.168.191.128" #define PORT 9999enum mode {TFTP_READ 1,TFTP_WRITE 2,TFTP_DATA 3,TFTP_ACK 4,TFTP_ERR 5 };void get_…

高维中介数据:基于交替方向乘子法(ADMM)的高维度单模态中介模型的参数估计(入门+实操)

全文摘要 用于高维度单模态中介模型的参数估计&#xff0c;采用交替方向乘子法&#xff08;ADMM&#xff09;进行计算。该包提供了确切独立筛选&#xff08;SIS&#xff09;功能来提高中介效应的敏感性和特异性&#xff0c;并支持Lasso、弹性网络、路径Lasso和网络约束惩罚等不…

npm 镜像源切换与设置

项目背景 依赖安装中断或响应特别慢。 可以看到当前所用的镜像是 https://registry.npmjs.org 。 切换淘宝镜像之后总算能够安装下来 命令行模式 查看当前镜像源 # 查看当前镜像源 npm config get registry 可以看到默认情况下是官方默认全局镜像 https://registry.npmjs.o…

竞争加剧下,登顶后的瑞幸该做什么?

瑞幸咖啡仅用短短18个月时间从品牌创立到纳斯达克上市&#xff0c;刷新全球最快上市记录。2020年因交易造假事件被勒令退市股价暴跌80%&#xff0c;有人说这个创造了赴美IPO奇迹的“巨婴”将是下一个倒下的ofo。2023年瑞幸咖啡以逆势超速增长领跑咖啡赛道有力回应了市场的质疑&…

Vector中的begin和end函数是左闭右开的区间

vector::end() 函数的语法 vector::end(); 参数&#xff1a; none——它什么都不接受。 返回值&#xff1a; iterator– 它返回一个指向向量的 past-the-end 元素的迭代器。 实际上Vector中的begin和end函数是左闭右开的区间。 例&#xff1a; Input: vector<int>…

Java多线程实现发布和订阅

目录 简介 步骤 1: 定义消息类 步骤 2: 创建发布者 步骤 3: 创建订阅者 步骤 4: 实现发布-订阅模型 前言-与正文无关 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&#xff0c;我们往往容易陷入工作的漩涡…

棋牌室计时计费管理系统的灯控器连接教程

棋牌室计时计费管理系统的灯控器连接教程 一、前言 以下教程以 佳易王棋牌室计时计费管理系统软件V18.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 如上图&#xff0c;计时计费软件在开始计时的时候&#xff0c;点击 开始计时 如果连接了…

YOLOv9独家改进|动态蛇形卷积Dynamic Snake Convolution与空间和通道重建卷积SCConv与RepNCSPELAN4融合

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;主力高效涨点&#xff01;&#xff01;&#xff01; 一、改进点介绍 Dynamic Snake Convolution是一种针对细长微弱的局部结构特征与复杂多变的全局形态特征设计的卷积模块。 SCConv是一种即插即用的空间…

华为OD机试真题C卷-篇6

100分值题 宽度最小的子矩阵部门人力分配电脑病毒感染会议室占用时间段 宽度最小的子矩阵 给定一个n行 * m列的矩阵&#xff1b;给定一个k个整数的数组k_list&#xff1b;在n*m的矩阵中找一个宽度最小的子矩阵&#xff0c;该子矩阵包含k_list中所有的整数&#xff1b; 输入描述…

【大数据】Flink SQL 语法篇(九):Window TopN、Deduplication

《Flink SQL 语法篇》系列&#xff0c;共包含以下 10 篇文章&#xff1a; Flink SQL 语法篇&#xff08;一&#xff09;&#xff1a;CREATEFlink SQL 语法篇&#xff08;二&#xff09;&#xff1a;WITH、SELECT & WHERE、SELECT DISTINCTFlink SQL 语法篇&#xff08;三&…

COM - get VARIANT value - .vt = (VT_BSTR | VT_ARRAY)

文章目录 COM - get VARIANT value - .vt (VT_BSTR | VT_ARRAY)概述笔记END COM - get VARIANT value - .vt (VT_BSTR | VT_ARRAY) 概述 取到一个VARIANT值, .vt 0x2008, 查了一下, 0x2008 (VT_BSTR | VT_ARRAY) 查了资料, 这个vt 0x2008是BSTR的数组. 看看咋取值? 网上…

3.2 log |416. 分割等和子集,1049.最后一块石头的重量II,494.目标和

416. 分割等和子集 class Solution { public:bool canPartition(vector<int>& nums) {vector<int> dp(10001,0);int sumaccumulate(nums.begin(),nums.end(),0);if(sum%2) return false;int targetsum/2;for(int i0;i<nums.size();i){for(int jtarget;j>…

项目管理:高效推动项目成功的关键

项目管理&#xff1a;高效推动项目成功的关键 在当今竞争激烈的商业环境中&#xff0c;项目管理已成为企业实现目标和取得成功的关键因素。有效的项目管理不仅能够确保项目按时完成&#xff0c;还能在预算范围内达到预期的质量标准。本文将探讨项目管理的重要性、关键环节以及…