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

文章目录

• • [1. 使用`@ViewChild`获取单个 DOM 节点](#1. 使用@ViewChild获取单个 DOM 节点)
  • [2. 使用`@ViewChildren`获取多个 DOM 节点](#2. 使用@ViewChildren获取多个 DOM 节点)
  • [3. 使用`ElementRef`直接访问 DOM](#3. 使用ElementRef直接访问 DOM)
  • [4. 使用`Renderer2`操作 DOM](#4. 使用Renderer2操作 DOM)
  • [5. 总结](#5. 总结)

在 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，除非确实必要。