【转】Angular4快速获取DOM元素，进行增删改样式等处理

获取DOM可能会使用原生的(如：document.getElementById('id'))；或者引入Jquery获取jquery对象获取元素。但在angular中千万别这么使用~~~因为官网API给我们提供更好的方法。

1.ElementRef

从官网可以看出，通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中，native 元素通常是指 DOM 元素)，最后借助于 Angular 2 提供的强大的依赖注入特性，我们就可以轻松地访问到 native 元素。

例子：

1.  
   <div style="width:100px;height:100px;border:1px solid red" class="btn1">按钮一</div>
2.  
   <p>了解ElementRef</p>

import { ElementRef} from '@angular/core';

1.  
   constructor( private el:ElementRef){}
2.  
   ngOnInit(){
3.  
   console.log(this.el.nativeElement);
4.  
   this.el.nativeElement.querySelector('.btn1').style.height = '300px';
5.  
   }

我们来看看打印出来的this.el.nativeElement是什么？

可以看到nativeElement其实包含的是组件中所有的DOM元素。如果想获取页面某个元素，可以使用querySelector获取某个元素或者querySelectorAll获取多个元素。

但是我们要尽量减少应用层与渲染层之间强耦合关系，从而让我们应用能够灵活地运行在不同环境。怎么做了？我们需要renderer2

 

【在Angular4中renderer已经废弃掉了，变成了renderer2。】

2.Renderer2

 

1.  
   <div style="width:100px;height:100px;border:1px solid red" class="btn1">按钮一</div>
2.  
   <p>了解ElementRef</p>

修改我们的js如下

import {ElementRef,OnInit,Renderer2} from '@angular/core';

1.  
   constructor(
2.  
   private el:ElementRef,
3.  
   private renderer2: Renderer2){}
4.  
   ngOnInit(){
5.  
   console.log(this.el.nativeElement);
6.  
   //this.el.nativeElement.querySelector('.btn1').style.height = '300px';
7.  
   this.renderer2.setStyle(this.el.nativeElement.querySelector('.btn1'),'background','green')
8.  
   }

关于Renderer2的更多API：

1.  
   abstract class Renderer2 {
2.  
   abstract get data: {...}
3.  
   destroyNode: ((node: any) => void) | null
4.  
   abstract destroy(): void
5.  
   abstract createElement(name: string, namespace?: string | null): any
6.  
   abstract createComment(value: string): any
7.  
   abstract createText(value: string): any
8.  
   abstract appendChild(parent: any, newChild: any): void
9.  
   abstract insertBefore(parent: any, newChild: any, refChild: any): void
10.  
    abstract removeChild(parent: any, oldChild: any): void
11.  
    abstract selectRootElement(selectorOrNode: string | any): any
12.  
    abstract parentNode(node: any): any
13.  
    abstract nextSibling(node: any): any
14.  
    abstract setAttribute(el: any, name: string, value: string, namespace?: string | null): void
15.  
    abstract removeAttribute(el: any, name: string, namespace?: string | null): void
16.  
    abstract addClass(el: any, name: string): void
17.  
    abstract removeClass(el: any, name: string): void
18.  
    abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void
19.  
    abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void
20.  
    abstract setProperty(el: any, name: string, value: any): void
21.  
    abstract setValue(node: any, value: string): void
22.  
    abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void
23.  
    }

详细官网链接

3.ViewChild(属性装饰器)

 

可以使用ViewChild从视图DOM中获取匹配选择器的第一个元素或指令。如果视图DOM发生变化，并且新的子项与选择器匹配，则属性将被更新。在ngAfterViewInit调用回调之前设置。

直接上代码吧：

1.  
   <div style="width:100px;height:100px;border:1px solid red" class="btn1">按钮一</div>
2.  
   <!--模板变量名-->
3.  
   <div style="width:100px;height:100px;" #div3>按钮三</div>
4.  
   <p>了解ElementRef</p>

import { ElementRef,OnInit,Renderer2,ViewChild} from '@angular/core';

1.  
   @ViewChild('div3') div3:ElementRef;
2.  
   constructor(
3.  
   private el:ElementRef,
4.  
   private renderer2: Renderer2){}
5.  
   ngOnInit(){
6.  
   console.log(this.el.nativeElement);
7.  
   //this.el.nativeElement.querySelector('.btn1').style.height = '300px';
8.  
   this.renderer2.setStyle(this.el.nativeElement.querySelector('.btn1'),'background','green');
9.  
   console.log('ViewChild获取匹配的元素:')
10.  
    console.log(this.div3.nativeElement);
11.  
    this.renderer2.setStyle(this.div3.nativeElement,'background','red');
12.  
    }

啊哈哈，元素获取到了，最后你想咋样就可以咋样了~~~

 

 

转自：https://blog.csdn.net/qq_28004379/article/details/80801378