详解如何在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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
微信小程序如何获取地址
Dec 24 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php支付宝接口用法分析
2015/01/04 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
python进阶教程之循环对象
2014/08/30 Python
Python变量和数据类型详解
2017/02/15 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
parser.add_argument中的action使用
2020/04/20 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
linux面试题参考答案(8)
2015/08/11 面试题
人力资源专业推荐信
2013/11/29 职场文书
业务内勤岗位职责
2014/04/30 职场文书
公司委托书格式
2014/08/01 职场文书
禁毒主题班会教案
2015/08/14 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android