@ViewChildren 是 Angular 框架中的一个装饰器，用于获取模板中某种类型或具有特定标记的所有子组件或 DOM 元素的查询列表。它的功能类似于 @ViewChild，但区别在于 @ViewChild 只获取第一个匹配的元素，而 @ViewChildren 可以获取所有匹配的元素。这个装饰器在需要操作或监控多个子元素时非常有用。
@ViewChildren 的基本使用方法
要使用 @ViewChildren，首先需要导入它：
import { ViewChildren, QueryList } from '@angular/core';
然后，在组件类中定义一个带有 @ViewChildren 装饰器的属性。这个属性通常是一个 QueryList 类型，它是 Angular 提供的一个特殊类，用于保存一组查询到的元素，并提供了一些有用的方法来操作这些元素。
示例讲解
下面是一个详细的示例，展示如何使用 @ViewChildren：
假设我们有一个简单的 Angular 应用，其中有一个父组件 ParentComponent 和一个子组件 ChildComponent。ParentComponent 需要获取所有 ChildComponent 的实例。
创建子组件 ChildComponent
首先，创建子组件 ChildComponent：
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `<p>{{ name }}</p>`,
})
export class ChildComponent {
@Input() name: string;
}
这个子组件非常简单，它接收一个 @Input 属性 name 并在模板中显示。
创建父组件 ParentComponent
接下来，创建父组件 ParentComponent：
// parent.component.ts
import { Component, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<app-child *ngFor="let child of children" [name]="child"></app-child>
`,
})
export class ParentComponent implements AfterViewInit {
children = ['Child 1', 'Child 2', 'Child 3'];
@ViewChildren(ChildComponent) childrenComponents: QueryList<ChildComponent>;
ngAfterViewInit() {
this.childrenComponents.forEach((childComponent) => {
console.log(childComponent.name);
});
}
}
在这个父组件中：
- 使用
@ViewChildren(ChildComponent)获取所有ChildComponent实例，并将它们存储在childrenComponents属性中。 - 实现
AfterViewInit接口，并在ngAfterViewInit生命周期钩子中操作这些子组件。这里我们遍历了所有的ChildComponent实例，并输出它们的name属性。
深入理解 QueryList
QueryList 是 Angular 提供的一个类，用于管理查询结果。它不仅仅是一个简单的数组，还提供了一些有用的方法和属性：
changes: 一个Observable，当QueryList中的内容发生变化时会发出通知。first: 获取查询到的第一个元素。last: 获取查询到的最后一个元素。toArray(): 将QueryList转换为数组。
示例：使用 changes 监控变化
假设我们的应用场景需要监控子组件的变化，比如子组件的数量发生变化时，我们需要做一些操作。我们可以利用 changes 来实现：
// parent.component.ts
import { Component, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<button (click)="addChild()">Add Child</button>
<app-child *ngFor="let child of children" [name]="child"></app-child>
`,
})
export class ParentComponent implements AfterViewInit {
children = ['Child 1', 'Child 2', 'Child 3'];
@ViewChildren(ChildComponent) childrenComponents: QueryList<ChildComponent>;
ngAfterViewInit() {
this.childrenComponents.changes.subscribe((comps: QueryList<ChildComponent>) => {
console.log('Children components changed:', comps);
});
}
addChild() {
this.children.push(`Child ${this.children.length + 1}`);
}
}
在这个示例中，当用户点击 Add Child 按钮时，会向 children 数组中添加一个新元素，从而触发 ViewChildren 的变化。ngAfterViewInit 中的 changes 订阅会捕捉到这个变化，并输出新的子组件列表。
处理不同类型的查询
有时候我们不仅仅需要查询某种组件，还可能需要查询特定的 DOM 元素或其他指令。@ViewChildren 同样可以处理这些场景。
示例：查询特定的 DOM 元素
假设我们需要查询模板中的所有 p 标签，并对它们做一些操作：
// parent.component.ts
import { Component, AfterViewInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<p *ngFor="let child of children">{{ child }}</p>
<button (click)="addChild()">Add Child</button>
`,
})
export class ParentComponent implements AfterViewInit {
children = ['Child 1', 'Child 2', 'Child 3'];
@ViewChildren('p') paragraphs: QueryList<ElementRef>;
ngAfterViewInit() {
this.paragraphs.forEach((paragraph) => {
console.log(paragraph.nativeElement.textContent);
});
}
addChild() {
this.children.push(`Child ${this.children.length + 1}`);
}
}
在这个示例中，我们使用 @ViewChildren('p') 来查询所有的 p 标签，并在 ngAfterViewInit 生命周期钩子中输出它们的文本内容。
复杂场景的应用
在实际项目中，使用 @ViewChildren 的场景可能更加复杂，比如需要同时操作多个不同类型的子组件或元素，或者需要在不同的生命周期钩子中进行不同的操作。
示例：查询不同类型的子组件
假设我们有两个不同的子组件 ChildAComponent 和 ChildBComponent，我们需要在父组件中同时查询并操作它们：
// child-a.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child-a',
template: `<p>{{ name }} (A)</p>`,
})
export class ChildAComponent {
@Input() name: string;
}
// child-b.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child-b',
template: `<p>{{ name }} (B)</p>`,
})
export class ChildBComponent {
@Input() name: string;
}
// parent.component.ts
import { Component, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { ChildAComponent } from './child-a.component';
import { ChildBComponent } from './child-b.component';
@Component({
selector: 'app-parent',
template: `
<app-child-a *ngFor="let child of childrenA" [name]="child"></app-child-a>
<app-child-b *ngFor="let child of childrenB" [name]="child"></app-child-b>
`,
})
export class ParentComponent implements AfterViewInit {
childrenA = ['Child A1', 'Child A2'];
childrenB = ['Child B1', 'Child B2'];
@ViewChildren(ChildAComponent) childrenAComponents: QueryList<ChildAComponent>;
@ViewChildren(ChildBComponent) childrenBComponents: QueryList<ChildBComponent>;
ngAfterViewInit() {
this.childrenAComponents.forEach((childComponent) => {
console.log(`ChildA: ${childComponent.name}`);
});
this.childrenBComponents.forEach((childComponent) => {
console.log(`ChildB: ${childComponent.name}`);
});
}
}
在这个示例中，父组件同时查询了 ChildAComponent 和 ChildBComponent，并分别对它们进行了操作。
@ViewChildren 的注意事项
使用 @ViewChildren 时，需要注意以下几点：
@ViewChildren只能查询当前组件模板中的元素，不能查询投影内容。如果需要查询投影内容，可以使用@ContentChildren。QueryList在初始化后可能不会立即包含所有的元素，需要在合适的生命周期钩子（如ngAfterViewInit）中进行操作。- 动态变化的内容（如通过
*ngIf控制的元素）会在QueryList中自动更新，但需要注意性能和订阅的合理管理。
实际应用中的场景
在实际应用中，@ViewChildren 的使用场景非常广泛，以下是一些常见的应用场景：
- 表单验证：在复杂表单中，需要获取所有的子表单组件，并对它们进行统一的验证和处理。
- 动画控制：在需要对多个元素进行统一的动画控制时，可以使用
@ViewChildren获取所有的目标元素，并对它们进行统一操作。 - 批量操作：需要对某类元素进行批量操作时，比如批量设置属性、批量监听事件等。
总结
@ViewChildren 是 Angular 提供的一个强大工具，用于获取模板中所有符合条件的子元素或组件实例。它与 @ViewChild 类似，但适用于需要处理多个匹配元素的场景。通过结合 QueryList 提供的功能，可以方便地对这些子元素进行操作和管理。
在实际开发中，合理地使用 @ViewChildren 可以提高代码的可维护性和可读性，使得对复杂组件结构的操作更加简洁高效。希望通过本文的介绍，能帮助你更好地理解和应用 @ViewChildren，以便在你的项目中更好地利用这个强大的特性。
