Angular 框架中的 @ViewChild 装饰器

@ViewChild 是 Angular 框架中的一个装饰器，用于在 Angular 组件类中获取对 DOM 元素或子组件的引用和操作。它在数据绑定和视图的交互动作用中扮演着关键角色。当你需要与模板中的某个元素或组件直接交互时，@ViewChild 装饰器是工具箱中非常有用的一部分。

在 Angular 中，@ViewChild 会在组件或指令的视图初始化（ngAfterViewInit 生命周期钩子）之后被设置，它提供了一种便捷的方法来访问 DOM 元素、指令实例以及子组件。这使得我们不仅仅在模板内定义交互，还可以在组件类中操作这些元素，从而实现更复杂的逻辑。

作用

1. 获取组件或指令实例：通过 @ViewChild 你可以很方便地获取模板中子组件的实例，从而调用这个子组件的方法或是访问它的属性。
2. 操作 DOM 元素：有时你需要直接操作 DOM 元素，例如设置焦点或更改样式。通过 @ViewChild，你可以在代码中直接引用到模板中的元素。
3. 访问模板引用变量：在模板中定义的引用变量（通过 # 语法），可以通过 @ViewChild 在组件类中获取，从而进行更复杂的操作和逻辑处理。

使用

使用 @ViewChild 装饰器非常简单，它接收两个参数：
1.查询选择器：用于选择模板中的元素或组件。

• 类选择器：用于选择组件或指令类型。例如 ChildComponent 或 SomeDirective。
• 模板引用变量：通过模板中的 # 变量进行引用。
• 字符串选择器：与 CSS 选择器类似，选择模板中的 HTML 元素。

2. 配置对象（可选）：配置对象包括一个键 static，用于指示查询是静态还是动态进行的。
   • static: true：用于静态查询，查询在视图初始化之前执行。
   • static: false（默认）：用于动态查询，查询在视图初始化之后执行。

示例代码 1：获取子组件实例

以下是一个简单的示例，展示如何使用 @ViewChild 获取子组件的实例。

父组件模板（parent.component.html）：

<app-child-component></app-child-component>
<button (click)="callChildMethod()">Call Child Method</button>

子组件（child.component.ts）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: '<p>Child Component</p>'
})
export class ChildComponent {
  someMethod() {
    console.log('Method called in Child!');
  }
}

父组件（parent.component.ts）：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  ngAfterViewInit() {
    // 可以确保 childComponent 已经被初始化
    console.log('Child Component:', this.childComponent);
  }

  callChildMethod() {
    this.childComponent.someMethod();
  }
}

在这个例子中，通过 @ViewChild，ParentComponent 可以访问 ChildComponent 的实例并调用其方法 someMethod。这在需要直接与子组件交互时，十分方便和有效。

示例代码 2：操作 DOM 元素

以下是一个简单的示例，展示如何使用 @ViewChild 获取模板中的 DOM 元素：

模板文件（example.component.html）：

<input type="text" #inputElement />
<button (click)="focusInput()">Focus Input</button>

组件文件（example.component.ts）：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements AfterViewInit {

  @ViewChild('inputElement') inputElementRef!: ElementRef;

  ngAfterViewInit() {
    // 视图初始化后可以访问 input 元素
    console.log('Input Element:', this.inputElementRef.nativeElement);
  }

  focusInput() {
    this.inputElementRef.nativeElement.focus();
  }
}

通过 @ViewChild 获取对模板中 input 元素的引用，然后在 focusInput 方法中使用 nativeElement.focus() 方法设置焦点。这样不仅提高了代码的可读性，同时也增强了代码的复用性和灵活性。

示例代码 3：访问模板引用变量

模板引用变量是另一种常见的用法，在模板中通过 # 语法定义。例如，下列代码展示了如何使用 @ViewChild 访问模板引用变量。

模板文件（template-example.component.html）：

<input type="text" #inputRef />
<button (click)="logValue()">Log Value</button>

组件文件（template-example.component.ts）：

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

@Component({
  selector: 'app-template-example',
  templateUrl: './template-example.component.html'
})
export class TemplateExampleComponent implements AfterViewInit {

  @ViewChild('inputRef') inputRef!: ElementRef;

  ngAfterViewInit() {
    // 视图初始化后可以访问 input 元素
    console.log('Input Element:', this.inputRef.nativeElement);
  }

  logValue() {
    console.log('Input Value:', this.inputRef.nativeElement.value);
  }
}

在这个例子中，我们在模板中定义了一个模板引用变量 inputRef，并通过 @ViewChild('inputRef') 获取对这个元素的引用。在 logValue 方法中，可以访问并打印 input 元素的值。

配置对象：静态和动态查询

@ViewChild 装饰器的第二个参数是配置对象，其中 static 属性是最常用的选项。这个选项影响了 Angular 从视图中查询元素的时间。

• static: true：视图查询将在 Angular 视图初始化过程中执行，即在 ngOnInit 执行之前。这种方法常用于那些在变更检测周期之外需要访问的元素或者组件。
• static: false：默认行为，视图查询将在视图完全初始化之后执行，即在 ngAfterViewInit 钩子中。这种方法适用于大多数情况。

示例代码：

@ViewChild(ChildComponent, { static: true }) childComponent!: ChildComponent;

这种配置在具体情景下选择适当的时机来获取视图元素可以提高应用程序的性能和可靠性。

@ViewChild 的最佳实践

1. 延迟处理：尽量在 ngAfterViewInit 生命周期钩子中处理 @ViewChild 引用，因为在这个钩子中，视图已经完全初始化。
2. 使用类型断言：如 ! 非空断言操作符，明确你的 @ViewChild 在这个组件中当然是存在的，减少运行时检查。
3. 使用 ElementRef 时，注意封装和抽象：直接操作原生 DOM 可能导致代码难以测试。例如，可以封装复杂的 DOM 操作逻辑到 Angular 服务中。
4. 避免过度使用：虽然 @ViewChild 是特别有用的工具，但应避免过度使用，以使组件的职责保持单一，减少复杂度。对于复杂的交互和业务逻辑，建议创建服务来处理。

常见问题

1. @ViewChild 在父组件中查询不到子组件？
   查看 static 属性是否正确设置，确认在适当的生命周期钩子中使用这个引用。
2. 如何在动态添加的元素上使用 @ViewChild?
   动态元素添加必须在视图初始化之后进行，确保在适当的生命周期钩子中获取动态元素。

过时的 read 属性

Angular 早期版本中，有时需要从指令获取不同类型的元素（例如与模板引用变量同名的原生 DOM 元素）。此时可以借助 read 属性：

@ViewChild('templateVar', { read: ElementRef }) templateVarRef: ElementRef;

这种情况虽然现在使用较少，但了解其历史有助于更好地理解和维护旧项目中的代码。总结来说，@ViewChild 在 Angular 中是一个非常强大的装饰器，它可以帮助我们在视图与数据之间建立更紧密的联系，使得交互的实现更加简便和直观。了解并掌握它的使用技巧，将对开发高效的 Angular 应用带来极大的帮助。