JavaScript
发布时间:2022-04-16 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了详解如何在Angular中快速定位DOM元素,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在使用Angular2+中,经常会想快速的去选择DOM上的某个元素,如果是刚上手Angular,有可能直接就使用原生DOM操作或者导入jQuery再进行DOM操作,既然都使用了Angular了,有没有更好的方法呢?答案是肯定的。
通过ElementRef
先上代码:
{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()
{
thi
s.e
l.nativeElement.query
SELEctor('
.btn1').style.height = '300px';
}
ngOnInit()
{
thi
s.setHeight(
);
}
}
效果是这样:
![详解如何在Angular中快速定位DOM元素 详解如何在Angular中快速定位DOM元素](https://files.jb51.cc/file_images/article/201705/2017517101100340.png?2017417101123)
上述代码中的nativeElement其实包含的是组件中所有的DOM元素,如下图所示:
![详解如何在Angular中快速定位DOM元素 详解如何在Angular中快速定位DOM元素](https://files.jb51.cc/file_images/article/201705/2017517101133884.png?2017417101249)
通过调用querySELEctorAPI
就能获取页面元素,需要注意的是querySELEctor
只返回第一个元素,当你需要选择多个元素的时候可以使用querySELEctorAll
。
通过@viewChild
{Component,OnInit,ViewChil
D} from '@angular/core';
@Component(
{
SELEctor: 'app-root',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit
{
@ViewChild('btn') btn:ElementRef;//通过@ViewChild获取元素
color
:string;
title = 'button !';
constructor(private el:ElementRef)
{}
setHeight()
{
thi
s.e
l.nativeElement.query
SELEctor('
.btn1').style.height = '300px';
}
setWidth()
{
this
.btn.nativeElement.style.width = '200px';//定义宽度
}
ngOnInit()
{
thi
s.setHeight(
);
thi
s.setWidth(
);
}
}
效果如下:
![详解如何在Angular中快速定位DOM元素 详解如何在Angular中快速定位DOM元素](https://files.jb51.cc/file_images/article/201705/2017517101334527.png?2017417101355)
如果多个HTML元素都定义了相同的变量,使用@viewChild时只能选择到第一个元素。
更好的方法是配合renderer2对象提供的API去实现同样的效果,这样减少应用层与渲染层之间强耦合关系:
{Component,Renderer2,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()
{
thi
s.e
l.nativeElement.query
SELEctor('
.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
选择元素,但是在Angular4
中renderer
已经废弃掉了,变成了renderer2
。
renderer2
API中还有其他的一些方法可以用来进行一些DOM操作:
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,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,flags?: RendererStyleFlags2) : void
setProperty(el: any,value: any) : void
SETVALue(node: any,value:
String) : void
listen(target: 'window'|'document'|'body'|any,eventName:
String,call
BACk: (event: any) =>
Boolean | void) : () => void
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。
大佬总结
以上是大佬教程为你收集整理的详解如何在Angular中快速定位DOM元素全部内容,希望文章能够帮你解决详解如何在Angular中快速定位DOM元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。