详解如何在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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
简单的网页广告特效实例
Aug 19 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 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
php中stream(流)的用法
2014/03/25 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php调整服务器时间的方法
2015/04/03 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
python中tab键是什么意思
2020/06/18 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Python3.9新特性详解
2020/10/10 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
超市重阳节活动方案
2014/02/10 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
经济贸易系求职信
2014/08/04 职场文书
2015年司法所工作总结
2015/04/27 职场文书
教师节主持词开场白
2015/05/29 职场文书
python中mongodb包操作数据库
2022/04/19 Python