Angular ViewChild访问子组件指令与DOM元素的方法

简介

先给出一个核心结论：ViewChild 是 Angular 中非常实用的装饰器，专门用来解决父组件直接访问子组件、指令或 DOM 元素的常见需求。它的作用是返回与指定指令、组件或模板引用选择器匹配的第一个元素，掌握 Angular ViewChild 用法能大幅提升组件间数据交互的效率。

先决条件

想动手实践？需要做好以下准备工作：

• 确保已安装 @angular/cli 工具。
• 使用 @angular/cli 创建一个新项目，专门用来测试 ViewChild 的各种场景。

本教程已在 @angular/core v13.0.2 和 @angular/cli v13.0.3 环境下验证通过，所有示例均可直接运行。

用 ViewChild 访问指令

先从指令入手。ViewChild 让父组件能够轻松获取指令内部的数据或行为，这是 Angular 组件通信的重要技巧。

假设有一个 SharkDirective，它会查找带有 appShark 属性的元素，并在元素文本前加上 "Shark" 字样。

使用 @angular/cli 生成指令最快捷——

ng generate directive shark --skip-tests

执行命令后，自动生成 shark.directive.ts，并将该指令注册到 app.module.ts：

import { SharkDirective } from './shark.directive';
...
@NgModule({
  declarations: [
    AppComponent,
    SharkDirective
  ],
  ...
})

接下来，借助 ElementRef 和 Renderer2 操作文本内容。将 shark.directive.ts 替换为以下代码：

import {
  Directive,
  ElementRef,
  Renderer2
} from '@angular/core';
@Directive(
  { selector: '[appShark]' }
)
export class SharkDirective {
  creature = 'Dolphin';
  constructor(elem: ElementRef, renderer: Renderer2) {
    let shark = renderer.createText('Shark ');
    renderer.appendChild(elem.nativeElement, shark);
  }
}

然后，在组件模板中找一个带文本的 span，加上 appShark 属性。将 app.component.html 替换为：

Fin!

在浏览器中可以看到，元素内容前面多出了 "Shark" 字样：

Shark Fin!

现在，你可以更进一步——访问 SharkDirective 中的 creature 实例变量，并用它的值设置一个 extraCreature 变量。将 app.component.ts 替换为：

import {
  Component,
  ViewChild,
  AfterViewInit
} from '@angular/core';
import { SharkDirective } from './shark.directive';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  extraCreature!: string;
  @ViewChild(SharkDirective)
  set appShark(directive: SharkDirective) {
    this.extraCreature = directive.creature;
  };
  ngAfterViewInit() {
    console.log(this.extraCreature); // Dolphin
  }
}

这段代码通过 setter 为 extraCreature 赋值。需要注意，必须在 AfterViewInit 生命周期钩子触发后才访问该变量——因为此时子组件和指令才真正初始化完成。

再次查看浏览器，页面依旧显示 "Shark Fin!"，但控制台日志输出：

Dolphin

这意味着父组件已成功读取指令中的属性值，这是 Angular ViewChild 访问指令的典型应用。

用 ViewChild 访问 DOM 元素

ViewChild 的另一个常见用途是通过模板引用变量直接操作原生 DOM 元素，这是实现 Angular 中 DOM 操作的高效方式。

假设模板中有一个 ，带有 #someInput 引用变量。将 app.component.html 替换为：

然后，用 ViewChild 定位这个输入框，并设置其值。将 app.component.ts 替换为：

import {
  Component,
  ViewChild,
  AfterViewInit,
  ElementRef
} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('someInput') someInput!: ElementRef;
  ngAfterViewInit() {
    this.someInput.nativeElement.value = 'Whale!';
  }
}

当 ngAfterViewInit 被触发时，输入框的 value 将变为：

Whale!

如此简单——父组件现在可以自由设置子 DOM 元素的值，这也是 Angular ViewChild 操作 DOM 的核心用法。

用 ViewChild 访问子组件

最后来看访问子组件的场景。ViewChild 使父组件能够调用子组件暴露的方法或读取其实例变量，这对于 Angular 父子组件通信至关重要。

假设有一个 PupComponent。同样，用 @angular/cli 生成：

ng generate component pup --flat --skip-tests

这条命令会创建 pup.component.ts、pup.component.css 和 pup.component.html，并将组件添加到 app.module.ts：

import { PupComponent } from './pup.component';
...
@NgModule({
  declarations: [
    AppComponent,
    PupComponent
  ],
  ...
})

然后在 PupComponent 中添加一个简单的 whoAmI 方法，返回字符串信息：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-pup',
  templateUrl: './pup.component.html',
  styleUrs: ['./pup/component.css']
})
export class PupComponent implements OnInit {
  constructor() { }
  whoAmI() {
    return 'I am a pup component!';
  }
  ngOnInit(): void {
  }
}

接下来在应用模板中引用这个子组件。将 app.component.html 替换为：

pup works!

现在，使用 ViewChild 在父组件类中调用 whoAmI 方法。将 app.component.ts 替换为：

import {
  Component,
  ViewChild,
  AfterViewInit
} from '@angular/core';
import { PupComponent } from './pup.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild(PupComponent) pup!: PupComponent;
  ngAfterViewInit() {
    console.log(this.pup.whoAmI()); // I am a pup component!
  }
}

在浏览器中打开应用，控制台日志会显示：

I am a pup component!

父组件就这样成功调用了子组件的方法，这也是 Angular ViewChild 访问子组件的标准实践。

小结

通过本教程，我们完整演示了 ViewChild 的三种典型用法：访问指令、操作 DOM 元素以及调用子组件。这些技巧是 Angular 开发中实现组件间交互的重要基础。

还有一个值得注意的细节：如果引用的元素在运行时被动态替换，ViewChild 会自动更新引用，无需手动干预。

当然，如果父组件需要同时访问多个子元素，则应该使用 ViewChildren——那是另一个同样强大的工具。