在使用Angular2+中,经常会想快速的去选择DOM上的某个元素,如果是刚上手Angular,有可能直接就使用原生DOM操作或者导入jQuery再进行DOM操作,既然都使用了Angular了,有没有更好的方法呢?答案是肯定的。
通过ElementRef
先上代码:
rush:js;">
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();
}
}
效果是这样:
上述代码中的nativeElement其实包含的是组件中所有的DOM元素,如下图所示:
通过调用querySelectorAPI
就能获取页面元素,需要注意的是querySelector
只返回第一个元素,当你需要选择多个元素的时候可以使用querySelectorAll
。
通过@viewChild
rush:xhtml;">
{{title}}
rush:js;">
import {Component,OnInit,ViewChild} 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(){
this.el.nativeElement.querySelector('.btn1').style.height = '300px';
}
setWidth(){
this.btn.nativeElement.style.width = '200px';//定义宽度
}
ngOnInit(){
this.setHeight();
this.setWidth();
}
}
效果如下:
如果多个HTML元素都定义了相同的变量,使用@viewChild时只能选择到第一个元素。
更好的方法是配合renderer2对象提供的API去实现同样的效果,这样减少应用层与渲染层之间强耦合关系:
rush:js;">
import {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(){
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操作:
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,callback: (event: any) => boolean | void) : () => void
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。