Angular查询Material树内组件时ViewChildren返回undefined如何解决

问题根因 #

1. <mat-tree> 是 Angular Material 封装的独立组件，你在 <mat-tree> 标签内部编写的 <mat-tree-node> 模板内容属于内容投影，会被传入 mat-tree 组件内部渲染，不在当前 TreeComponent 的视图查询范围内，因此用 @ViewChildren 永远查询不到目标组件。
2. 你之前使用 @ContentChildren 时未开启 descendants: true 配置，ContentChildren 默认仅查询直接子级投影内容，无法捕获到 mat-tree 内部深层渲染的 <app-dynamic> 组件。

解决方案 #

1. 修正 ContentChildren 装饰器配置，添加 descendants: true 参数：

// Tree.component.ts
@ContentChildren('dynamic', { read: DynamicComponent, descendants: true }) children: QueryList<DynamicComponent>;

2. 模板中保留 <app-dynamic> 的模板变量标记：

<!-- Tree.component.html -->
<app-dynamic #dynamic></app-dynamic>

3. 在正确的生命周期订阅 QueryList 的变更事件，获取动态渲染的组件实例：

// Tree.component.ts
import { Subject, takeUntil } from 'rxjs';

// 用于取消订阅避免内存泄漏
private destroy$ = new Subject<void>();

public ngAfterContentInit(): void {
  // 直接获取首次加载已渲染的节点组件
  console.log('已渲染组件列表', this.children.toArray());
  // 监听后续节点展开/收起触发的组件列表变更
  this.children.changes
    .pipe(takeUntil(this.destroy$))
    .subscribe((list: QueryList<DynamicComponent>) => {
      console.log('更新后的组件列表', list.toArray());
      // 此处执行你的业务逻辑
    });
}

public ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

注意事项 #

• @ContentChildren 的查询结果初始化完成于 ngAfterContentInit 生命周期，不要在更早的生命周期（如 ngOnInit）访问查询结果。
• 如果你的 mat-tree 搭配了 cdk 虚拟滚动使用，仅视口内可见的节点会被渲染，QueryList 仅会返回可见节点对应的 DynamicComponent 实例，不可见节点不会被查询到。
• 确保 DynamicComponent 已正确注册：NgModule 模式下需要在对应模块的 declarations 数组中声明；Standalone 模式下需要在 TreeComponent 的 imports 数组中导入。

内容的提问来源于stack exchange，提问作者Josh Ray