Angular 中如何使用 ViewChild 和 ViewChildren？

Angular 是一个流行的前端框架，它提供了许多有用的功能和工具，其中包括 ViewChild 和 ViewChildren。这两个功能可以帮助我们在组件中访问子组件或 DOM 元素。在本文中，我们将详细介绍这两个功能的使用方法，并提供一些示例代码来帮助您更好地理解它们。

ViewChild

ViewChild 可以帮助我们在组件中访问子组件或 DOM 元素。它是 Angular 提供的一个装饰器，可以在组件中用来获取对子组件或 DOM 元素的引用。下面是一个示例：

// javascriptcn.com 代码示例
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="onClick()">Click me</button>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  @ViewChild('myButton') myButton: ElementRef;

  onClick() {
    this.childComponent.doSomething();
    this.myButton.nativeElement.style.backgroundColor = 'red';
  }
}

@Component({
  selector: 'app-child',
  template: `
    <p>Child component</p>
  `
})
export class ChildComponent {
  doSomething() {
    console.log('do something');
  }
}

在这个示例中，我们定义了一个父组件 ParentComponent 和一个子组件 ChildComponent。在父组件中，我们使用 ViewChild 装饰器来获取对子组件 ChildComponent 和 DOM 元素 myButton 的引用。在 onClick 方法中，我们可以使用这些引用来调用子组件的方法和修改 DOM 元素的样式。

值得注意的是，当我们使用 ViewChild 获取 DOM 元素的引用时，我们需要使用 ElementRef 类来获取原始的 DOM 元素，然后才能访问其属性和方法。

ViewChildren

ViewChildren 与 ViewChild 类似，但它可以用来获取组件中所有符合指定条件的子组件或 DOM 元素。下面是一个示例：

// javascriptcn.com 代码示例
import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <app-child></app-child>
    <button (click)="onClick()">Click me</button>
  `
})
export class ParentComponent {
  @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;
  @ViewChildren('myButton') myButtons: QueryList<ElementRef>;

  onClick() {
    this.childComponents.forEach(childComponent => childComponent.doSomething());
    this.myButtons.forEach(button => button.nativeElement.style.backgroundColor = 'red');
  }
}

@Component({
  selector: 'app-child',
  template: `
    <button #myButton>Child button</button>
  `
})
export class ChildComponent {
  doSomething() {
    console.log('do something');
  }
}

在这个示例中，我们定义了一个父组件 ParentComponent 和两个子组件 ChildComponent。在父组件中，我们使用 ViewChildren 装饰器来获取对所有子组件 ChildComponent 和 DOM 元素 myButton 的引用。在 onClick 方法中，我们可以使用这些引用来调用所有子组件的方法和修改所有 DOM 元素的样式。

值得注意的是，当我们使用 ViewChildren 获取 DOM 元素的引用时，我们需要使用 QueryList 类来获取原始的 DOM 元素列表，然后才能访问每个元素的属性和方法。

总结

ViewChild 和 ViewChildren 是 Angular 提供的两个有用的功能，它们可以帮助我们在组件中访问子组件或 DOM 元素。在本文中，我们详细介绍了这两个功能的使用方法，并提供了一些示例代码来帮助您更好地理解它们。希望这篇文章能够对您在使用 Angular 开发应用程序时有所帮助。

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