Angular2+ 获取、操作DOM元素

灰太狼 2021-09-16 20:48 567阅读 0赞

### 前言 ###

angular中在`’@angular/core’`库中通过提供`Renderer2`和`ElementRef`中实现了有关于DOM的操作，但是，angular中**不推荐**直接操作dom元素，通过`变量结合内置指令`是当前操作DOM的最好实践

### 获取DOM元素 ###

####     1、通过模板变量名获取单个DOM元素 ####

**@ViewChild 通过模板变量名获取DOM元素**  
        `ViewChild`是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 `ngAfterViewInit` 钩子函数调用前完成，因此在`ngAfterViewInit`钩子函数中，才能正确获取查询的元素。

import { Component, ViewChild, AfterViewInit } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      template: `
        <h1>Welcome to Angular World</h1>
        <p #greet>Hello {
       { name }}</p>
      `,
    })
    export class AppComponent {
      name: string = 'Semlinker';
    
      @ViewChild('greet')
      greetDiv: ElementRef;
    
      ngAfterViewInit() {
        console.log(this.greetDiv.nativeElement);
      }
    }

###     2、通过ElementRef获取DOM元素 ###

通过`css选择器`获取单个DOM 并设置属性

import { ElementRef} from '@angular/core';
    export class AppComponent {
      constructor( private el:ElementRef){}
      ngOnInit(){
        console.log(this.el.nativeElement);
        this.el.nativeElement.querySelector('.btn1').style.height = '300px';
      }
    }

通过css选择器获取多个DOM 并设置属性

###     3、通过Renderer2获取元素 ###

import { Renderer2} from '@angular/core';
    export class AppComponent {
      constructor( private render2: Renderer2){}
      ngOnInit(){
        const child = this.render2.selectRootElement(".div1");
            console.log(child);
        }
    }

### 操作DOM元素 ###

在angular中提供的Renderer2中，有关DOM元素的增删改查、class、style操作，  
连接地址：[https://angular.cn/api/core/Renderer2\#selectRootElement][https_angular.cn_api_core_Renderer2_selectRootElement]

[https_angular.cn_api_core_Renderer2_selectRootElement]: https://angular.cn/api/core/Renderer2#selectRootElement