Angular ViewChild从零开始实现组件间通信的完整详细教程

Angular ViewChild 组件间通信详解

本篇文章是 Angular 组件间通信系列教程的最后一篇，重点介绍 ViewChild 的使用。读者也可以直接阅读，但若对前面几种通信方式（如 @Input / @Output）不熟悉，建议先回顾之前章节，以便更好地理解 Angular 组件通信的整体脉络。

接下来介绍 Angular 组件间通信的终极手段——ViewChild。需要说明的是，ViewChild 更像是“备选方案”而非首选。因为 ViewChild 本身不具备响应式特性，它直接操作组件实例并调用方法，不像 EventEmitter 或数据绑定那样能自动响应数据变化。这种方式容易引发“竞态条件”（race condition），关键在于调用顺序与组件渲染时机的依赖。

正因如此，本部分内容将保持简洁。大多数实际开发场景中，应优先使用 @Input / @Output 或服务层实现组件通信，但掌握 ViewChild 这一技巧，在特定场景下仍然有用。

如何通过 ViewChild 调用子组件方法

例如，我们有一个 AppComponent，其模板中包含一个按钮和一个子组件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(ChildComponent, {static : false}) childComponent : ChildComponent;

  runChild() {
    this.childComponent.run();
  }
}

它的 HTML 长这样：

Click Me

这里使用 @ViewChild() 装饰器在模板中查找名为 ChildComponent 的子组件。此外，还可以通过模板引用变量（如 #childName）来指定组件，但核心原理相同：利用 @ViewChild 获取子组件引用，然后直接调用其方法。

子组件实现非常简单：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  run() {
    // 这里可以放一堆业务逻辑，然后输出一条消息
    console.log("Run Successfully!");
  }
}

代码清晰直接。运行后，点击 AppComponent 中的按钮，会触发 ChildComponent 的 run() 方法，控制台打印 “Run Successfully!”。这就是 ViewChild 最直观的用法。

以上是 Angular 中使用 ViewChild 实现组件间通信的完整示例。需要强调的是，尽管该方法简单直接，但由于其非响应式特性，实际项目中应优先使用 @Input / @Output 或服务层进行组件通信。ViewChild 更适合在特定时机主动调用子组件方法或访问子组件属性，而不宜作为常规通信链路。