详解如何在Angular中快速定位DOM元素


Posted in Javascript onMay 17, 2017

在使用Angular2+中,经常会想快速的去选择DOM上的某个元素,如果是刚上手Angular,有可能直接就使用原生DOM操作或者导入jQuery再进行DOM操作,既然都使用了Angular了,有没有更好的方法呢?答案是肯定的。

通过ElementRef

先上代码:

import {Component, ElementRef, OnInit} from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
 color:string;
 title = 'button !';
 constructor(private el:ElementRef){}
 setHeight(){
  this.el.nativeElement.querySelector('.btn1').style.height = '300px';
 }
 ngOnInit(){
  this.setHeight();
 }
}
<h1>
 {{title}}
</h1>
<div>
<button myHighlight class="btn btn1">按钮一</button>
<button myHighlight class="btn">按钮二</button>
<button myHighlight class="btn">按钮三</button>
</div>

效果是这样:

详解如何在Angular中快速定位DOM元素

上述代码中的nativeElement其实包含的是组件中所有的DOM元素,如下图所示:

详解如何在Angular中快速定位DOM元素

通过调用querySelectorAPI就能获取页面元素,需要注意的是querySelector只返回第一个元素,当你需要选择多个元素的时候可以使用querySelectorAll

通过@viewChild

<h1>
 {{title}}
</h1>
<div>
<button myHighlight class="btn btn1">按钮一</button>
<button myHighlight class="btn" #btn>按钮二</button> <!--增加一个变量-->
<button myHighlight class="btn">按钮三</button>
</div>
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
 @ViewChild('btn') btn:ElementRef;//通过@ViewChild获取元素
 color:string;
 title = 'button !';
 constructor(private el:ElementRef){}
 setHeight(){
  this.el.nativeElement.querySelector('.btn1').style.height = '300px';
 }
 setWidth(){
  this.btn.nativeElement.style.width = '200px';//定义宽度
 }
 ngOnInit(){
  this.setHeight();
  this.setWidth();
 }
}

效果如下:

详解如何在Angular中快速定位DOM元素

如果多个HTML元素都定义了相同的变量,使用@viewChild时只能选择到第一个元素。

更好的方法是配合renderer2对象提供的API去实现同样的效果,这样减少应用层与渲染层之间强耦合关系:

import {Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
 @ViewChild('btn') btn:ElementRef;
 color:string;
 title = 'button !';
  //初始化renderer2
 constructor(private el:ElementRef,private renderer2: Renderer2){}
 setHeight(){
  this.el.nativeElement.querySelector('.btn1').style.height = '300px';
 }
 setWidth(){
  // this.btn.nativeElement.style.width = '200px';
  
  //使用renderer2的setStyle方法设置宽度
  this.renderer2.setStyle(this.btn.nativeElement,'width','200px')
 }
 ngOnInit(){
  this.setHeight();
  this.setWidth();
 }
}

参考文章中都提到了@viewChild配合renderer选择元素,但是在Angular4renderer已经废弃掉了,变成了renderer2

renderer2API中还有其他的一些方法可以用来进行一些DOM操作:

class Renderer2 {
 data : {[key: string]: any}
 destroy() : void
 createElement(name: string, namespace?: string) : any
 createComment(value: string) : any
 createText(value: string) : any
 destroyNode : (node: any) => void |
 appendChild(parent: any, newChild: any) : void
 insertBefore(parent: any, newChild: any, refChild: any) : void
 removeChild(parent: any, oldChild: any) : void
 selectRootElement(selectorOrNode: string|any) : any
 parentNode(node: any) : any
 nextSibling(node: any) : any
 setAttribute(el: any, name: string, value: string, namespace?: string) : void
 removeAttribute(el: any, name: string, namespace?: string) : void
 addClass(el: any, name: string) : void
 removeClass(el: any, name: string) : void
 setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2) : void
 removeStyle(el: any, style: string, flags?: RendererStyleFlags2) : void
 setProperty(el: any, name: string, value: any) : void
 setValue(node: any, value: string) : void
 listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any) => boolean | void) : () => void
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
3种js实现string的substring方法
Nov 09 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 #Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 #Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
AngularJS使用拦截器实现的loading功能完整实例
May 17 #Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 #Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 #Javascript
bootstrap轮播图示例代码分享
May 17 #Javascript
You might like
解析ajax事件的调用顺序
2013/06/17 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
Js sort排序使用方法
2011/10/17 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
Python创建系统目录的方法
2015/03/11 Python
python游戏地图最短路径求解
2019/01/16 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
工业自动化专业毕业生推荐信
2013/11/18 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python