如何在Angular中获取指定组件的所有子组件？

嘿，这个需求我太熟了！在Angular里获取组件的子组件，主要分两种场景，对应两种API，我给你一步步讲清楚：

如果你的子组件是直接写在父组件的模板里（比如 <app-child></app-child> 这种），那@ViewChildren就是你的首选。

具体步骤： #

1. 先导入需要的依赖：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component'; // 你的子组件类

2. 在父组件类里声明查询：

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <app-child></app-child>
  `
})
export class ParentComponent implements AfterViewInit {
  // 用子组件类作为查询条件，获取所有匹配的子组件
  @ViewChildren(ChildComponent) childComponents!: QueryList<ChildComponent>;

  ngAfterViewInit() {
    // 一定要在这个生命周期钩子之后访问，因为此时视图已经初始化完成
    console.log('所有视图子组件：', this.childComponents.toArray());
    
    // 如果想监听子组件的新增/移除，可以订阅QueryList的changes事件
    this.childComponents.changes.subscribe(() => {
      console.log('子组件列表变化了：', this.childComponents.toArray());
    });
  }
}

如果你的父组件是通过<ng-content>接收外部传入的子组件（比如使用时 <app-parent><app-child></app-child></app-parent>），那得用@ContentChildren。

具体步骤： #

1. 同样先导入依赖：

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

2. 父组件类里声明查询：

@Component({
  selector: 'app-parent',
  template: `<ng-content></ng-content>` // 内容投影插槽
})
export class ParentComponent implements AfterContentInit {
  // 查询所有通过内容投影进来的ChildComponent
  @ContentChildren(ChildComponent) projectedChildComponents!: QueryList<ChildComponent>;

  ngAfterContentInit() {
    // 这个钩子之后内容投影的组件才会被初始化
    console.log('所有内容投影子组件：', this.projectedChildComponents.toArray());
    
    // 同样可以监听变化
    this.projectedChildComponents.changes.subscribe(() => {
      console.log('投影子组件列表变化了');
    });
  }
}

• 生命周期时机：@ViewChildren必须在ngAfterViewInit之后访问，@ContentChildren要在ngAfterContentInit之后，不然会拿到空值；
• QueryList特性：它不是普通数组，是Angular封装的可观察对象，调用toArray()可以转换成普通数组；
• 模糊查询：如果想获取所有子组件不管类型，可以用@ViewChildren(any)，但不推荐，尽量指定具体组件类，避免意外获取到不需要的元素；
• 深度查询：如果要获取嵌套的子组件（比如子组件里的子组件），可以加{ descendants: true }选项，比如@ViewChildren(ChildComponent, { descendants: true })。

内容的提问来源于stack exchange，提问作者ILIA hu