Angular使用总结 --- 如何正确的操作DOM
无奈接手了一个旧项目,上一个老哥在Angular项目中大量使用了JQuery来操作DOM,真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢?
获取元素
1、ElementRef --- A wrapper around a native element inside of a View.
在组件的 constructor中注入ElementRef,可以获取到整个组件元素的包裹。
@Component({selector: 'app-test-page',templateUrl: './test-page.component.html',styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {constructor(private el: ElementRef) { }ngOnInit() {}getDomTest() {console.dir(this.el);}
}
ElementRef中的nativeElement即是组件最外层的DOM元素。再通过原生的DOM定位方式,即可获取到指定的selector元素。
getDomTest() {console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 获取指定的子元素}
2、@viewChild() --- You can use ViewChild to get the first element or the directive matching the selector from the view DOM.
@viewChild可以获取指定的元素, 指定的方式可以是本地变量或者组件类型;
// HTML
<div class="tip-test-wrapper"> // 本地变量绑定button按钮<button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button></div> // Dialog组件
<app-dialog></app-dialog>// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';@Component({selector: 'app-test-page',templateUrl: './test-page.component.html',styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {// 通过本地变量获取元素 可通过read来指定获取的元素类型@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;@ViewChild('testdom') viewelement: ElementRef;
// 通过组件类型来获取@ViewChild(DialogComponent) viewcontent: DialogComponent;constructor(private el: ElementRef) { }ngOnInit() {}getDomTest() {// console.dir(this.el.nativeElement.querySelector('.test-get-dom'));console.dir(this.viewcontainer);console.dir(this.viewelement);console.dir(this.viewcontent);}
}
备注:ElementRef或者 @viewChild 获取元素,一定要在 ngAfterViewInit 周期之后再使用。
3、@viewChildren -- You can use ViewChildren to get the {@link QueryList} of elements or directives from theview DOM.
@viewChild会返回符合条件的第一个元素,如果需要获取多个符合条件的元素呢?@viewChildren会返回所有符合条件的元素的list。指定selector的方式与@viewChild一致。
// 复制一个元素<div class="tip-test-wrapper"><button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button></div><div class="tip-test-wrapper"><button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button></div>
</div>
<app-dialog></app-dialog>
<app-dialog></app-dialog>// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';@Component({selector: 'app-test-page',templateUrl: './test-page.component.html',styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;@ViewChild('testdom') viewelement: ElementRef;@ViewChildren('testdom') viewelements: QueryList<any>;
@ViewChild(DialogComponent) viewcontent: DialogComponent;@ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;constructor(private el: ElementRef) { }ngOnInit() {}getDomTest() {// console.dir(this.el.nativeElement.querySelector('.test-get-dom'));// console.dir(this.viewcontainer);console.dir(this.viewelement);console.dir(this.viewelements);console.dir(this.viewcontent);console.dir(this.viewcontents);}
操作DOM --- Renderer2
在获取dom之后,如何对dom进行操作呢?原生的domAPI是一种选择,但是Angular提供了更好的跨平台方式 Renderer2。
引入 Renderer2 , 然后在construct中注入。
import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild, Renderer2 , ViewChildren, QueryList} from '@angular/core';import { DialogComponent } from './../../common/components/dialog/dialog.component';@Component({selector: 'app-test-page',templateUrl: './test-page.component.html',styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;@ViewChild('testdom') viewelement: ElementRef;@ViewChildren('testdom') viewelements: QueryList<any>;@ViewChild(DialogComponent) viewcontent: DialogComponent;@ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;constructor(
private render: Renderer2,private el: ElementRef) { }ngOnInit() {}getDomTest() { // 修改元素颜色this.render.setStyle(this.viewelement.nativeElement , 'color' , 'red');}
}
renderer2提供了丰富的API供使用,如下:
总结
通过elementRef或者@viewChild @viewChildren获取元素,再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。通过Angular提供的方式,可以满足大部分的操作DOM的需求了。如果有特殊的场景,当然还是原生DOM撸起来呀
更多专业前端知识,请上 【猿2048】www.mk2048.com
Angular使用总结 --- 如何正确的操作DOM相关推荐
- Angular学习笔记64:使用Render2安全操作DOM元素
在项目中有时候需要直接操作DOM,但是这样直接访问 DOM 会导致应用很容易受到在 XSS 攻击.所以并不建议直接访问 DOM. 在Angular 访问DOM 需要使用 Render2 来实现自定义渲 ...
- php去除html标签_用PHP操作DOM (一)
从事PHP开发很多年了,也写过些小项目,经常要在后台生成前端输出的HTML脚本,说白了就是把HTML语言以字符串的方式嵌入在PHP的输入语句中,单纯的输出没什么问题,但遇到DOM修改时很是麻烦,要做各 ...
- vanilla_如何在Vanilla JavaScript中操作DOM
vanilla by carlos da costa 通过卡洛斯·达·科斯塔 如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Van ...
- 原生JS操作DOM对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 读Zepto源码之操作DOM
2019独角兽企业重金招聘Python工程师标准>>> 这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎sta ...
- jQuery 操作 DOM
为什么80%的码农都做不了架构师?>>> 操作 DOM 使用jquery 选择器得到节点的 jquery对象.使用 jquery对象可以操作dom! 修改Text和Html ...
- 通过JavaScript简单的操作DOM(一)
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...
- java操作dom节点的添加_java操作DOM节点的添加,删除,修改
java操作DOM节点的添加,删除,修改 下面我们开始对此xml添加,删除,修改:方法一 import java.io.File; import java.io.IOException; import ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
最新文章
- 210322阶段三QT事件循环及opencv图像处理
- 词嵌入 网络嵌入_词嵌入简介
- dbms和sql_DBMS | 并发控制和各种并发控制方法
- python array函数_Python bytearray() 函数
- Jeasyframe 开源框架 V1.6 发布
- 细节真的能决定成败么?
- DB2数据库对现有表格字段修改
- python ** 运算符_Python语法基础(2)运算符
- 求n的阶乘java_Java 求n的阶乘
- 给兆芯出主意:开发一批新指令,交叉授权
- 查询linux安装了哪种中文,linux 安装 中文字体
- GitHub 微信公众号爬虫推荐
- wxnativecallback.php,ectouch开发 | 糊涂虫
- APM 、PX4, PIXHAWK
- CSS(持续更新。。)
- Git教学资源,安装,关联账号,创建/关联/克隆库,版本回退,管理修改基本指令
- 波浪过程下载Loading动画
- 蓝牙耳机哪款好用?2020高性能低延迟游戏蓝牙耳机推荐
- 为什么是web墨卡托投影
- vim插件安装_如何安装Vim插件
热门文章
- python开发的系统有哪些_Python web开发=几个模板系统的性能对比
- redis 能不能监听特定的key失效_php监听redis key失效触发回调事件
- 雷林鹏分享:C# 运算符
- linux下面调试C、C++
- [BZOJ4537][Hnoi2016]最小公倍数 奇怪的分块+可撤销并查集
- Vue 2.0 入门系列(15)学习 Vue.js 需要掌握的 es6 (2)
- mustache,用{{}}获取值
- 【Android Developers Training】 81. 解析XML数据
- CSS伪类的三种写法
- oracle mysql 字段_Oracle和MySQL修改字段