在angular 8中使用@viewChild

在Angular 8中，@ViewChild是一个装饰器，用于在组件中获取对子组件、DOM元素或指令实例的引用。它允许父组件与子组件进行通信和交互。

@ViewChild装饰器可以用于以下几种情况：

1. 获取对子组件的引用：可以使用@ViewChild装饰器来获取对子组件的引用，以便在父组件中调用子组件的方法或访问子组件的属性。
2. 获取对DOM元素的引用：可以使用@ViewChild装饰器来获取对DOM元素的引用，以便在组件中直接操作DOM。
3. 获取对指令实例的引用：可以使用@ViewChild装饰器来获取对指令实例的引用，以便在组件中调用指令的方法或访问指令的属性。

使用@ViewChild装饰器的语法如下：

@ViewChild(selector, { static: false }) propertyName: Type;

其中，selector可以是组件类名、模板变量名、指令类名或CSS选择器。propertyName是一个属性，用于存储获取到的引用。Type是要获取的引用的类型。

@ViewChild装饰器还可以接受一个可选的配置对象，其中static属性用于指定查询是否在静态查询阶段进行（默认为false）。

下面是一个示例，展示了如何在Angular 8中使用@ViewChild装饰器：

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="logChildComponent()">Log Child Component</button>
    <div #myDiv>Some content</div>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  @ViewChild('myDiv') myDiv: ElementRef;

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

  ngAfterViewInit() {
    console.log(this.myDiv.nativeElement.textContent);
  }
}

@Component({
  selector: 'app-child',
  template: 'Child Component'
})
export class ChildComponent {}

在上面的示例中，ParentComponent通过@ViewChild装饰器获取了对ChildComponent的引用，并在logChildComponent方法中打印了该引用。此外，还使用@ViewChild装饰器获取了对名为myDiv的DOM元素的引用，并在ngAfterViewInit生命周期钩子中打印了该DOM元素的内容。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，可满足各种计算需求。了解更多信息，请访问腾讯云云服务器。
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问腾讯云对象存储。