这篇文章主要介绍了在Angular中快速定位DOM元素的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
在使用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(); } }
{{title}}
效果是这样:
上述代码中的nativeElement其实包含的是组件中所有的DOM元素,如下图所示:
通过调用querySelectorAPI
就能获取页面元素,需要注意的是querySelector
只返回第一个元素,当你需要选择多个元素的时候可以使用querySelectorAll
。
通过@viewChild
{{title}}
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(); } }
效果如下:
如果多个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
选择元素,但是在Angular4
中renderer
已经废弃掉了,变成了renderer2
。
renderer2
API中还有其他的一些方法可以用来进行一些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 }
感谢你能够认真阅读完这篇文章,希望小编分享的“在Angular中快速定位DOM元素的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。