Angular使用总结 --- 如何正确的操作DOM

妖狐艹你老母 2022-03-22 12:43 196阅读 0赞

原文出处：[https://www.cnblogs.com/shapeY/p/9272961.html][https_www.cnblogs.com_shapeY_p_9272961.html]

无奈接手了一个旧项目，上一个老哥在Angular项目中大量使用了JQuery来操作DOM，真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢？

## 获取元素 ##

### 　　1、ElementRef  ---   A wrapper around a native element inside of a View. ###

**在组件的 constructor中注入ElementRef，可以获取到整个组件元素的包裹。**

![复制代码][Image 1]

@Component({
      selector: 'app-test-page',
      templateUrl: './test-page.component.html',
      styleUrls: ['./test-page.component.scss']
    })
    export class TestPageComponent implements OnInit {
    
      constructor(
        private el: ElementRef
      ) { }
    
      ngOnInit() {
      }
    
      getDomTest() {
        console.dir(this.el);
      }
    ｝

![复制代码][Image 1]

![1072774-20180706114346643-1033770439.png][]

**　ElementRef中的nativeElement即是组件最外层的DOM元素。再通过原生的DOM定位方式，即可获取到指定的selector元素。**

getDomTest() {
        console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 获取指定的子元素
      }

### 　　 ###

### 　　2、@viewChild()  ---    You can use ViewChild to get the first element or the directive matching the selector from the  view DOM.  ###

**@viewChild可以获取指定的元素， 指定的方式可以是本地变量或者组件类型；**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 </td> 
 <td> <code>// HTML</code> <code>&lt;div </code><code>class</code><code>=</code><code>"tip-test-wrapper"</code><code>&gt;　　　</code><code>// 本地变量绑定button按钮</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;button </code><code>class</code><code>=</code><code>"test-get-dom"</code> <code>#testdom (click)=</code><code>"getDomTest()"</code><code>&gt;测试获取DOM&lt;/button&gt;</code> <code>&nbsp;</code><code>&lt;/div&gt;　　</code><code>// Dialog组件</code> <code>&lt;app-dialog&gt;&lt;/app-dialog&gt;</code> &nbsp; &nbsp; <code>// ts</code> <code>import { DialogComponent } </code><code>from</code> <code>'./../../common/components/dialog/dialog.component'</code><code>;</code> &nbsp; &nbsp; <code>@Component({ </code> <code>&nbsp;&nbsp;</code><code>selector: </code><code>'app-test-page'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>templateUrl: </code><code>'./test-page.component.html'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>styleUrls: [</code><code>'./test-page.component.scss'</code><code>]</code> <code>})</code> <code>export </code><code>class</code> <code>TestPageComponent implements OnInit { </code> <code>　 </code><code>// 通过本地变量获取元素&nbsp; 可通过read来指定获取的元素类型</code> <code>&nbsp;&nbsp;</code><code>@ViewChild(</code><code>'testdom'</code> <code>, { read: ViewContainerRef }) viewcontainer: ViewContainerRef;</code> <code>&nbsp;&nbsp;</code><code>@ViewChild(</code><code>'testdom'</code><code>) viewelement: ElementRef;　 </code><code>// 通过组件类型来获取</code> <code>&nbsp;&nbsp;</code><code>@ViewChild(DialogComponent) viewcontent: DialogComponent;</code> &nbsp; <code>&nbsp;&nbsp;</code><code>constructor(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>private</code> <code>el: ElementRef</code> <code>&nbsp;&nbsp;</code><code>) { }</code> &nbsp; <code>&nbsp;&nbsp;</code><code>ngOnInit() { </code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>getDomTest() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// console.dir(this.el.nativeElement.querySelector('.test-get-dom'));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.dir(</code><code>this</code><code>.viewcontainer);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.dir(</code><code>this</code><code>.viewelement);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.dir(</code><code>this</code><code>.viewcontent);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

![1072774-20180706121600678-1365247182.png][]

备注：ElementRef或者 @viewChild 获取元素，一定要在 ngAfterViewInit 周期之后再使用。

### 　3、@viewChildren --   You can use ViewChildren to get the \{@link QueryList\} of elements or directives from theview DOM. ###

@viewChild会返回符合条件的第一个元素，如果需要获取多个符合条件的元素呢？@viewChildren会返回所有符合条件的元素的list。指定selector的方式与@viewChild一致。

![复制代码][Image 1]

// 复制一个元素
 <div class="tip-test-wrapper">
 <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
 </div>
 <div class="tip-test-wrapper">
 <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
 </div>
 </div>
 <app-dialog></app-dialog>
 <app-dialog></app-dialog>
 
 // ts
 import { DialogComponent } from './../../common/components/dialog/dialog.component';
 
 
 @Component({
 selector: 'app-test-page',
 templateUrl: './test-page.component.html',
 styleUrls: ['./test-page.component.scss']
 })
 export class TestPageComponent implements OnInit {
 
 @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
 @ViewChild('testdom') viewelement: ElementRef;
 @ViewChildren('testdom') viewelements: QueryList<any>;

@ViewChild(DialogComponent) viewcontent: DialogComponent;
 @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;
 
 constructor(
 private el: ElementRef
 ) { }
 
 ngOnInit() {
 }
 
 getDomTest() {
 // console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
 // console.dir(this.viewcontainer);
 console.dir(this.viewelement);
 console.dir(this.viewelements);
 console.dir(this.viewcontent);
 console.dir(this.viewcontents);
 }

![复制代码][Image 1]

![1072774-20180706123048048-244373131.png][]

## 操作DOM  --- Renderer2 ##

在获取dom之后，如何对dom进行操作呢？原生的domAPI是一种选择，但是Angular提供了更好的跨平台方式   Renderer2。

引入 *Renderer2  ,* 然后在construct中注入。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 </td> 
 <td> <code>import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild, &lt;strong&gt; Renderer2&lt;/strong&gt; , ViewChildren, QueryList} </code><code>from</code> <code>'@angular/core'</code><code>;</code> &nbsp; <code>import { DialogComponent } </code><code>from</code> <code>'./../../common/components/dialog/dialog.component'</code><code>;</code> &nbsp; &nbsp; <code>@Component({ </code> <code>&nbsp;&nbsp;</code><code>selector: </code><code>'app-test-page'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>templateUrl: </code><code>'./test-page.component.html'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>styleUrls: [</code><code>'./test-page.component.scss'</code><code>]</code> <code>})</code> <code>export </code><code>class</code> <code>TestPageComponent implements OnInit { </code> &nbsp; <code>&nbsp;&nbsp;</code><code>@ViewChild(</code><code>'testdom'</code> <code>, { read: ViewContainerRef }) viewcontainer: ViewContainerRef;</code> <code>&nbsp;&nbsp;</code><code>@ViewChild(</code><code>'testdom'</code><code>) viewelement: ElementRef;</code> <code>&nbsp;&nbsp;</code><code>@ViewChildren(</code><code>'testdom'</code><code>) viewelements: QueryList&lt;any&gt;;</code> <code>&nbsp;&nbsp;</code><code>@ViewChild(DialogComponent) viewcontent: DialogComponent;</code> <code>&nbsp;&nbsp;</code><code>@ViewChildren(DialogComponent) viewcontents: QueryList&lt;DialogComponent&gt;;</code> &nbsp; <code>&nbsp;&nbsp;</code><code>constructor(</code> <code>&lt;strong&gt;&nbsp;&nbsp;&nbsp; </code><code>private</code> <code>render: Renderer2,&lt;/strong&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>private</code> <code>el: ElementRef</code> <code>&nbsp;&nbsp;</code><code>) { }</code> &nbsp; <code>&nbsp;&nbsp;</code><code>ngOnInit() { </code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>getDomTest() {&lt;br&gt;&nbsp;&nbsp;&nbsp; &lt;strong&gt;</code><code>// 修改元素颜色&lt;/strong&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;strong&gt;</code><code>this</code><code>.render.setStyle(</code><code>this</code><code>.viewelement.nativeElement , </code><code>'color'</code> <code>, </code><code>'red'</code><code>);&lt;/strong&gt;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>｝</code> </td> 
 </tr> 
 </tbody> 
</table>

**renderer2提供了丰富的API供使用**，如下：

![1072774-20180706134052180-278428649.png][]

## 总结 ##

通过elementRef或者@viewChild @viewChildren获取元素，再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。通过Angular提供的方式，可以满足大部分的操作DOM的需求了。如果有特殊的场景，当然还是原生DOM撸起来呀

[https_www.cnblogs.com_shapeY_p_9272961.html]: https://www.cnblogs.com/shapeY/p/9272961.html
[Image 1]: 
[1072774-20180706114346643-1033770439.png]: /images/20220322/97d49308e7ad4da794e91657d8b697ae.png
[1072774-20180706121600678-1365247182.png]: /images/20220322/14802cc7e80940b7980b105d4eb3d192.png
[1072774-20180706123048048-244373131.png]: /images/20220322/2c6be6818be74b479abec6ab3241e1b8.png
[1072774-20180706134052180-278428649.png]: /images/20220322/e76ae60391d24e2da4e8769f9013d09a.png