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!');