Angular 12 中如何使用 ViewChild 获取子组件的实例-JavaScript中文网-JavaScript教程资源分享门户

Angular 12 中如何使用 ViewChild 获取子组件的实例

ViewChild 是 Angular 中大家熟知的一个特性，可以通过它获取到在模板中声明的子组件实例或者元素。本篇文章将详细介绍在 Angular 12 中如何使用 ViewChild 获取子组件的实例。

在 Angular 中，具有子父关系的组件可以通过 @ViewChild 获取到子组件的实例。具体来说，@ViewChild 可以获取另一个组件的实例对象，并将该对象分配给一个属性。在使用 ViewChild 时，要注意以下几点：

@ViewChild 仅可以获取子组件的实例，对普通 DOM 元素无效。
组件的视图必须已被渲染才可以使用 ViewChild。
ViewChild 只能获取在同一个 ts 文件中定义的子组件，不能获取在其他组件中定义的子组件。

下面以一个简单的示例来演示如何使用 ViewChild 获取子组件的实例：

假设我们有一个名为 ParentComponent 的组件，它的模板中包含一个名为 ChildComponent 的组件。我们需要在 ParentComponent 中获取 ChildComponent 的实例。

<!-- ParentComponent 模板 -->
<app-child #child></app-child>

在 ParentComponent 中我们需要定义一个 ViewChild 属性来获取 ChildComponent 的实例，如下所示：

export class ParentComponent implements AfterViewInit {
  @ViewChild('child') childComponent: ChildComponent;

  ngAfterViewInit(): void {
    this.childComponent.doSomething(); // 调用子组件方法
  }
}

在上述代码中，我们通过 ViewChild 装饰器获取到了名为 child 的子组件实例，并将它赋值给 childComponent 属性。在 ngAfterViewInit 生命周期钩子函数中，我们可以调用子组件的方法。

需要注意的是，我们要等到 Angular 渲染了组件视图后（即 ngAfterViewInit 钩子函数被触发时），才能在组件中使用 ViewChild。

如果您需要获取多个子组件实例，可以使用 QueryList 来管理所有子组件。QueryList 是 Angular 提供的一个集合类，可以用来保存一组 DOM 元素或者组件实例。

export class ParentComponent {
  @ViewChildren('child') childComponents: QueryList<ChildComponent>;

  ngAfterViewInit(): void {
    this.childComponents.forEach((childComponent) => {
      childComponent.doSomething(); // 调用每个子组件的方法
    });
  }
}

在上述代码中，我们使用了 @ViewChildren 装饰器来获取所有名为 child 的子组件实例，并将它们保存在一个 QueryList 里面。在 ngAfterViewInit 钩子函数中，我们遍历了所有子组件实例，并调用它们的方法。

总结

通过 ViewChild，我们可以方便地获取子组件内部的状态并进行操作。在使用 ViewChild 时，需要注意视图已渲染和子组件定义在同一个 ts 文件中的限制。

示例代码已上传到 GitHub，希望可以帮助大家更好地使用 ViewChild。

参考资料

《Angular Cookbook》 - Mathieu Nayrolles, 刘洋, 黄斐, 陈小平《Angular 学习指南》 - 美波 angular.io文档：https://angular.cn/docs

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65aba567add4f0e0ff54e842