angular2 对于DOM元素的获取与操作_angular 获取dom对象 使用changes-程序员宅基地

技术标签: angular2  renderer2  

  为了能够支持跨平台,angular通过抽象层封装了不同平台的差异。

  正确操作DOM的方式(用ElementRef和Renderer2)这篇文章将讲述如何使用Renderer2来操作DOM元素。我们可以使用Renderer2对元素的class和style属性进行操作,也可以对元素进行增加、删除、和插入等操作。

使用的技术:

1.   angular4.2.4

2.   TypeScript2.3.3

3.    NodeJs6.10.1

4.   Angular CLI 1.3.1

5.   Angular Compiler CLI 4.2.4

 

一. createElement()、createText、appendChild()

createElement(name: string, namespace?: string|null): any

createText(value: string): any

appendChild(parent: any, child: any): void

例子:

 

 

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({

selector: 'app-append',

templateUrl: './append-demo.component.html'

})

export class AppendDemoComponent {

@ViewChild('div') private d1: ElementRef;  

constructor(private renderer: Renderer2) {

}

onClick() {

const li = this.renderer.createElement('li');

const text = this.renderer.createText('Click here to add li');

this.renderer.appendChild(li, text);

this.renderer.appendChild(this.d1.nativeElement, li);

}

}

 

二、insertBefore()

 

insertBefore(parent: any, newChild: any, refChild: any): void

例子:

 

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

 

@Component({

selector: 'app-insertBefore',

templateUrl: './insertBefore.component.html',

styleUrls: ['./insertBefore.component.css']

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36501349/article/details/79535395

智能推荐

使用docker搭建XSS漏洞靶场_xshell靶场搭建命令-程序员宅基地

文章浏览阅读1.5k次。在docker中搭建xss漏洞靶场首先用Xshell连上自己的虚拟机# 安装docker-composepip install docker-compose# 下载vulstudy项目 如果失败了请往下看git clone https://github.com/c0ny1/vulstudy.git下图是红字是说python版本需要3.5以上,而本机的是2.7.5黄字警告是说pip版本低,但是还可以用,不管它就是了使用docker-compose部署容器安装镜像(快速版)因为GitH_xshell靶场搭建命令

/etc/passwd文件和/etc/shadow文件_/etc/shadow $6-程序员宅基地

文章浏览阅读2.2k次。在Linux系统中的账户,密码被存放在两个文件中:/etc/passwd和/etc/shadow。/etc/passwd文件上图就是etc/passwd文件中的内容。可以观察到,其中每一行的内容从格式上来看都是一致的。其实,每一行都代表一个帐号,比如上图中的第一行root账号,第二行daemon账号,第三行bin账号,......。这个文件中除了保存root账号,普通用户的账号之外,还保存了系统正常运行所需要的一些账号,比如daemon,bin,sys等系统账号。既然每一行的形式都是一样的._/etc/shadow $6

C语言:找到数组中出现次数最多的元素_数组元素出现次数最多-程序员宅基地

文章浏览阅读683次。找到数组中出现次数最多的元素_数组元素出现次数最多

hibernate级联删除2000条数据速度慢_用数据解读火爆的咪蒙-程序员宅基地

文章浏览阅读88次。此为公众号数据分析第三篇,前两篇见乐了:公众号数据分析系列之-caoz的梦呓​zhuanlan.zhihu.com乐了:公众号数据分析系列之-占豪​zhuanlan.zhihu.com这次要分析的号是最近一两天又被炒上天的“咪蒙”。 嗯,就是那个篇篇10W+的咪蒙。分析理由:最近特火爆(其实一直很火爆),别人多从内容方面去分析,我就提供点数据分析的佐料吧。至于他最近有多火微信指数最直观了。分析文..._级联删除速度很慢

MySQL-锁表和解锁_mysql锁表和解锁语句-程序员宅基地

文章浏览阅读1.2w次,点赞12次,收藏51次。介绍锁是计算机协调多个进程或线程并发访问某一资源的机制。锁保证数据并发访问的一致性、有效性;锁冲突也是影响数据库并发访问性能的一个重要因素。锁是Mysql在服务器层和存储引擎层的的并发控制。加锁是消耗资源的,锁的各种操作,包括获得锁、检测锁是否是否已解除、释放锁等。锁机制共享锁与排他锁共享锁(读锁):其他事务可以读,但不能写。排他锁(写锁) :其他事务不能读取,也不能写。粒度锁MySQL 不同的存储引擎支持不同的锁机制,所有的存储引擎都以自己的方式显现了锁机制,服务器层完全不了解存储引擎中的_mysql锁表和解锁语句

Zotero | 如何在参考文献中插入一段解释性文字_zotero怎么添加注释-程序员宅基地

文章浏览阅读1.1k次。使用Zotero作为Word中的一个插件,可以很方便地按照所需的参考文献格式来插入。但是有时候我们我们在写中文期刊论文的时候需要给出一段话的解释,这是并不需要作者、年份、期刊等论文,这个时候应该怎么插入进去呢?_zotero怎么添加注释

随便推点

嵌入式内核及驱动开发(初级)_嵌入式内核开发-程序员宅基地

文章浏览阅读1.1k次,点赞3次,收藏14次。提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档**嵌入式内核及驱动开发(初级)**文章目录嵌入式内核及驱动开发(初级)一、设备环境的搭建二、驱动开发![在这里插入图片描述](https://img-blog.csdnimg.cn/20210614165916608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ_嵌入式内核开发

idea中debug按钮灰化如何解决_idea debug按钮灰色-程序员宅基地

文章浏览阅读1.6w次,点赞5次,收藏13次。在idea中启动/debug按钮呈灰化状态解决教程_idea debug按钮灰色

docker 里使用pm2守护多个进程和日志记录使用pm2-logrotate_pm2-runtime-程序员宅基地

文章浏览阅读1.9k次。docker 里使用pm2守护多个进程和日志记录使用pm2-logrotate_pm2-runtime

基于Live555实现RtspServer及高清高码率视频传输优化-程序员宅基地

文章浏览阅读312次。基于Live555实现RtspServer及高清高码率视频传输优化_live555

安信可LoRaWAN网关 RG-02 接入TTN平台,控制多节点LoRaWAN模组。-程序员宅基地

文章浏览阅读2.9k次,点赞2次,收藏8次。本文章将说明如何使用安信可RG-02网关对接TTN平台,实现数据发送与接收。_ttn平台

【51单片机】十分钟学会定时器&中断¹_51单片机定时器-程序员宅基地

文章浏览阅读3.7w次,点赞359次,收藏1.3k次。51单片机的定时器属于单片机的内部资源,其电路的连接和运转均在单片机内部进行完成的。这个其实就是我们前面之前玩的那些硬件就是,比如说独立按键以及数码管和LCD1602 的这些硬件实际上都是单片机的IO口进行控制的一个外设,就像我们单片机都是实实在在的设备。但是我们这个定时器呢?虽说也是一个实在的电路,但这个电路都是在 MCU 单片机的电路内部进行完成的。就是说我们这个单片机 STC89C52 芯片给拿走。而光有这个单片机就可以实现定时器的这个功能,这个定时器就是属于单片机的一个内部资源。.........._51单片机定时器

推荐文章

热门文章

相关标签