详解如何在Angular中快速定位DOM元素

2019-08-22 12:37栏目:WRB前端

详解怎样在Angular中极快牢固DOM成分,angulardom

在利用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>

功能是那样:

图片 1

上述代码中的nativeElement其实包罗的是组件中颇具的DOM成分,如下图所示:

图片 2

经过调用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();
 }
}

功能如下:

图片 3

万一三个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
}

如上正是本文的全体内容,希望对大家的上学抱有扶助,也指望大家多多协助帮客之家。

在动用Angular2 中,常常会想神速的去选拔DOM上的某部元素,即便是刚上手Angular,有相当大希望直接就...

在行使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>

效果与利益是如此:

图片 4

上述代码中的nativeElement其实包涵的是组件中兼有的DOM成分,如下图所示:

图片 5

因此调用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();
 }
}

功效如下:

图片 6

假诺多个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
}

上述正是本文的全部内容,希望对大家的学习抱有援助,也冀望我们多多支持脚本之家。

您大概感兴趣的篇章:

  • AngularJS达成DOM成分的来得与遮掩成效

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:详解如何在Angular中快速定位DOM元素