详解如何在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实现鼠标可拖动调整表格列宽度
May 26 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 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 执行系统命令的方法
2009/07/07 PHP
php中几种常见安全设置详解
2010/04/06 PHP
php cli换行示例
2014/04/22 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
js 处理URL实用技巧
2010/11/23 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
优秀班组长事迹
2014/05/31 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
党员个人党性分析材料
2014/12/18 职场文书
大学生求职信怎么写
2015/03/19 职场文书
社区党建工作总结2015
2015/05/13 职场文书
专项资金申请报告
2015/05/15 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫