Angular 中获取 DOM 节点的几种方法

在 Angular 开发中，虽然框架鼓励我们通过组件和模板来操作 DOM，但在某些情况下，直接访问和操作 DOM 节点仍然是必要的。Angular 提供了多种方式来实现这一需求，本文将详细介绍几种常见的方法，帮助你在项目中灵活地获取和操作 DOM 节点。

1. 使用@ViewChild获取单个 DOM 节点

@ViewChild是 Angular 提供的一个装饰器，用于获取模板中某个特定的 DOM 元素或组件实例。它通常与ElementRef一起使用，以便直接操作 DOM。

示例代码

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";@Component({selector: "app-example",template: ` <div #myDiv>这是一个div</div> `,
})
export class ExampleComponent implements AfterViewInit {@ViewChild("myDiv", { static: false }) myDiv: ElementRef;ngAfterViewInit() {console.log(this.myDiv.nativeElement); // 获取到的DOM元素this.myDiv.nativeElement.style.color = "red"; // 操作DOM}
}

• 在模板中，通过#myDiv定义了一个本地变量。
• 使用@ViewChild('myDiv')通过本地变量获取对应的 DOM 元素。
• ElementRef提供了对原生 DOM 元素的访问。
• 在ngAfterViewInit生命周期钩子中操作 DOM，确保 DOM 已经渲染完成
• static 选项决定了 Angular何时解析和注入@ViewChild 或@ViewChildren 所指定的元素：
  • true: 当你需要在 ngOnInit 中访问 DOM 元素时，应该使用 static: true。
  • false: 当你需要获取运行时动态生成的 DOM 元素，例如通过*ngIf、*ngFor，应该使用 static: false。

2. 使用@ViewChildren获取多个 DOM 节点

如果需要获取多个 DOM 节点，可以使用@ViewChildren。它与@ViewChild类似，但可以获取多个匹配的 DOM 元素。

示例代码

import {Component,ViewChildren,QueryList,ElementRef,AfterViewInit,
} from "@angular/core";@Component({selector: "app-example",template: ` <div *ngFor="let item of items" #myDivs>{{ item }}</div> `,
})
export class ExampleComponent implements AfterViewInit {@ViewChildren("myDivs") myDivs: QueryList<ElementRef>;items = ["第一项", "第二项", "第三项"];ngAfterViewInit() {this.myDivs.forEach((div: ElementRef, index: number) => {console.log(`第\${index + 1}个div:`, div.nativeElement);div.nativeElement.style.backgroundColor = "lightblue";});}
}

• 使用@ViewChildren获取多个 DOM 节点时，它会返回一个QueryList，其中包含所有匹配的 DOM 元素。
• QueryList是一个动态的查询列表，可以遍历操作每个 DOM 元素。

3. 使用ElementRef直接访问 DOM

ElementRef可以直接访问组件的根 DOM 元素。不过，这种方法通常不推荐，因为它违反了 Angular 的封装原则，但在某些特殊场景下仍然可以使用。

示例代码

import { Component, ElementRef, OnInit } from "@angular/core";@Component({selector: "app-example",template: ` <div>这是一个div</div> `,
})
export class ExampleComponent implements OnInit {constructor(private el: ElementRef) {}ngOnInit() {console.log(this.el.nativeElement); // 获取组件的根DOM元素this.el.nativeElement.querySelector("div").style.color = "green";}
}

• 通过constructor注入ElementRef，可以直接访问组件的根 DOM 元素。
• 这种方法虽然可以直接操作 DOM，但不推荐使用，因为它可能导致代码难以维护。

4. 使用Renderer2操作 DOM

Angular 推荐使用Renderer2来操作 DOM，而不是直接操作ElementRef。Renderer2提供了一种安全的操作 DOM 的方式，避免了直接操作 DOM 可能带来的问题。

示例代码

import { Component, Renderer2, ElementRef, OnInit } from "@angular/core";@Component({selector: "app-example",template: ` <div #myDiv>这是一个div</div> `,
})
export class ExampleComponent implements OnInit {@ViewChild("myDiv", { static: true }) myDiv: ElementRef;constructor(private renderer: Renderer2) {}ngOnInit() {this.renderer.setStyle(this.myDiv.nativeElement, "color", "blue");}
}

• Renderer2提供了setStyle、addClass等方法来安全地操作 DOM。
• 使用Renderer2操作 DOM 是 Angular 推荐的方式，更符合框架的设计原则。

5. 总结

在 Angular 开发中，有多种方式可以获取和操作 DOM 节点。@ViewChild和@ViewChildren是获取 DOM 节点的常用方法，而Renderer2则是推荐的操作 DOM 的方式。尽量避免直接操作ElementRef，除非确实必要。