Angular @ViewChild

@ViewChild是Angular中的一个装饰器，用于获取组件或指令中的子元素。它可以用来获取子组件、DOM元素或指令实例。

下面是一个使用@ViewChild获取子组件的示例：

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    console.log(this.childComponent);
  }
}

在上面的示例中，@ViewChild装饰器用于获取ChildComponent组件的实例。在ngAfterViewInit生命周期钩子中，我们可以访问子组件的属性和方法。

除了获取子组件，@ViewChild还可以用于获取DOM元素和指令实例。例如，下面的示例演示了如何使用@ViewChild获取DOM元素：

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

@Component({
  selector: 'app-parent',
  template: `
    <input type="text" #myInput>
  `
})
export class ParentComponent {
  @ViewChild('myInput') myInput: ElementRef;

  ngAfterViewInit() {
    console.log(this.myInput.nativeElement);
  }
}

在上面的示例中，@ViewChild装饰器用于获取名为“myInput”的DOM元素的引用。在ngAfterViewInit生命周期钩子中，我们可以访问DOM元素的属性和方法。

总之，@ViewChild是一个非常有用的装饰器，可以让我们轻松地获取组件、DOM元素或指令实例。