Angular中的@ViewChild装饰器用于在组件中获取对子组件、DOM元素或指令的引用。下面是一些常见的使用@ViewChild的示例。

1. 获取对子组件的引用：

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

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

  ngAfterViewInit() {
    // 在这里可以访问子组件的属性和方法
    console.log(this.childComponent.someProperty);
    this.childComponent.someMethod();
  }
}

2. 获取对DOM元素的引用：

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

@Component({
  selector: 'app-my-component',
  template: `
    
  `
})
export class MyComponent {
  @ViewChild('myInput')
  myInput: ElementRef;

  ngAfterViewInit() {
    // 在这里可以访问DOM元素的属性和方法
    console.log(this.myInput.nativeElement.value);
    this.myInput.nativeElement.focus();
  }
}

3. 获取对指令的引用：

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

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  doSomething() {
    console.log('Doing something...');
  }
}

@Component({
  selector: 'app-my-component',
  template: `
    

  `
})
export class MyComponent {
  @ViewChild(MyDirective)
  myDirective: MyDirective;

  ngAfterViewInit() {
    // 在这里可以访问指令的属性和方法
    this.myDirective.doSomething();
  }
}

通过使用@ViewChild装饰器，可以很方便地获取对子组件、DOM元素或指令的引用，以便在父组件中操作它们的属性和方法。