什么是 Angular 中的 ElementRef

ElementRef 是 Angular 中的一个类，用于引用 DOM 元素。通过它，可以直接访问和操作 DOM 元素。这在需要进行低级别的 DOM 操作时十分有用，尽管大多数情况下，使用 Angular 提供的模板和数据绑定以及指令等功能，可以避免直接操作 DOM。

在 Angular 框架中，ElementRef 的定义位于 @angular/core 包中。其核心作用是封装原生元素（native element），并提供一个 TypeScript 类型的方式来操作这些元素。通过 ElementRef，可以获取到一个指向 DOM 元素的引用，而无需使用传统的 JavaScript 或 jQuery 方法来遍历 DOM 树。

源代码分析

让我们看一下 ElementRef 的源代码。ElementRef 在 Angular 的核心包 @angular/core 中定义：

export class ElementRef<T = any> {
  constructor(public nativeElement: T) {}
}

这个类很简单，其构造函数接受一个 nativeElement 参数，并将其公开为一个公共成员。nativeElement 是对一个 DOM 元素的引用，类型默认为 any，但可以通过泛型参数 T 来指定具体类型。

以下是 ElementRef 类的一个简单概述：

• nativeElement: 这是 ElementRef 类的唯一属性。它持有对实际 DOM 元素的引用。

ElementRef 的封装和直接引用 DOM 的方式，使得它在某些需要高性能和高精度操作的场景中非常有用。

使用场合

ElementRef 通常在以下几种场合下使用：

1. 自定义指令

在自定义指令中，可以使用 ElementRef 访问被应用指令的元素。下面的例子展示了如何创建一个简单的自定义指令，该指令将元素的背景颜色设置为黄色：

import { Directive, ElementRef, Renderer2 } from `@angular/core`;

@Directive({
  selector: `[appHighlight]`
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, `backgroundColor`, `yellow`);
  }
}

在这个例子中，HighlightDirective 使用 ElementRef 来访问被指令应用的元素，并使用 Renderer2 设置背景颜色。

2. 动态创建和操作 DOM 元素

即便 Angular 强烈建议通过模板驱动的方式来创建和操作 DOM，可以用 ElementRef 在某些需要动态创建元素的场景来直接操作 DOM。

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

@Component({
  selector: `app-root`,
  template: `<div #container></div>`
})
export class AppComponent implements OnInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    const div = this.renderer.createElement(`div`);
    const text = this.renderer.createText(`Hello, Angular!`);
    this.renderer.appendChild(div, text);
    this.renderer.appendChild(this.el.nativeElement.querySelector(`#container`), div);
  }
}

在这种情况下，使用 Renderer2 和 ElementRef 可以创建和操作 DOM 元素。

使用 ElementRef 时的注意事项

虽然 ElementRef 提供了直接操作 DOM 元素的能力，但不应滥用这一功能。用 ElementRef 操作 DOM 可能会违反 Angular 的数据绑定模型。以下几点需要注意：

1. 安全性

直接操作 DOM 可能会引入安全问题，例如 XSS 攻击。因此，应该尽量避免直接将用户输入注入到 DOM 元素中。

this.el.nativeElement.innerHTML = userInput; // 请避免这种用法

Angular 提供了各种功能以确保安全性，比如通过绑定属性和使用 Angular 模板语法中的安全机制。

2. 兼容性

浏览器的差异可能会导致直接操作 DOM 的代码在不同环境中不能正常工作。通过 Angular 的 Renderer2 涵盖了不同平台和安全考虑，因此比直接使用 ElementRef 安全和兼容性更高。

constructor(private el: ElementRef, private renderer: Renderer2) {
  this.renderer.setStyle(this.el.nativeElement, `backgroundColor`, `yellow`);
}

示例：创建一个光标指令

以下是一个更复杂的指令例子，它将鼠标悬停在元素上时改变元素的颜色：

import { Directive, ElementRef, HostListener, Renderer2 } from `@angular/core`;

@Directive({
  selector: `[appHoverColor]`
})
export class HoverColorDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener(`mouseenter`) onMouseEnter() {
    this.changeColor(`blue`);
  }

  @HostListener(`mouseleave`) onMouseLeave() {
    this.changeColor(`black`);
  }

  private changeColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, `color`, color);
  }
}

在这个例子中，我们创建了一个 HoverColorDirective，使用 ElementRef 和 Renderer2 修改元素的样式。我们通过 HostListener 装饰器捕获鼠标事件，这样我们就可以在鼠标进入和离开元素时动态更改元素的色彩。

通过视图查询访问 ElementRef

除了在构造函数中注入 ElementRef，还可以通过 Angular 的查询装饰器 @ViewChild 来获取视图中的 DOM 元素引用。在这种情况下，ElementRef 通常与模板引用变量结合使用。

import { Component, ElementRef, ViewChild, AfterViewInit } from `@angular/core`;

@Component({
  selector: `app-example`,
  template: `
    <div #myDiv>Content to be highlighted</div>
  `
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild(`myDiv`) myDiv!: ElementRef;

  ngAfterViewInit() {
    this.myDiv.nativeElement.style.backgroundColor = `yellow`;
  }
}

在这个示例中，我们使用 @ViewChild 装饰器获取到模板中 myDiv 的引用。注意我们在 ngAfterViewInit 生命周期钩子中使用了 ElementRef，这是因为在 ngAfterViewInit 被调用时，视图中的所有 DOM 元素已经被初始化完毕，可以安全地访问。

结论

ElementRef 是 Angular 中一个重要的工具类，尽管其使用场合相对有限。它的主要作用是提供对底层 DOM 元素的直接访问和操作，但在使用它时应小心注意安全性和兼容性问题。尽管直接操作 DOM 是可能的，但通常更推荐使用 Angular 中提供的数据绑定、指令和服务来达到同样的目的。

这种直接操作 DOM 的方法虽然有其十分关键的使用场景，但也要求开发者在使用时具备较高的谨慎态度。通过对 ElementRef 的学习和理解，不仅可以增强对 Angular 框架的理解，还能在特定场景下有效提高项目的灵活性和性能。