Angular中以Directive为选择器的ViewChild返回undefined问题求助

核心原因 #

你编写的独立组件未显式导入TestContainerDirective，Angular独立组件要求所有用到的独立指令/组件必须添加到imports数组中，否则框架无法识别指令实例，导致ViewChild查询返回undefined。

修复步骤 #

1. 补全组件的imports数组
   将TestContainerDirective添加到AppTestComponent的imports中：

@Component({
  selector: 'app-test',
  standalone: true,
  // 新增TestContainerDirective到imports
  imports: [CommonModule, OtherContainerDirective, TestContainerDirective],
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

2. 修正console.log的笔误
   在ngAfterViewInit方法中，两处打印_otherContainerRef的代码错误引用了_testContainerRef，需要修正：

public ngAfterViewInit(): void {
  console.log('_testContainerRef', this._testContainerRef);
  // 修正此处的引用
  console.log('_otherContainerRef', this._otherContainerRef);

  console.log('_testContainerChildren', this._testContainerChildren);

  setTimeout(() => {
    console.log('_testContainerRef', this._testContainerRef);
    // 同样修正此处
    console.log('_otherContainerRef', this._otherContainerRef);
  }, 0);
}

原理说明 #

Angular独立组件的依赖解析完全基于imports数组，未导入的独立指令不会被框架实例化到组件视图中——即使DOM元素存在，也只是原生HTML节点，没有关联Angular指令实例，因此ViewChild无法查询到对应的引用。

修复后，无需依赖setTimeout，在ngAfterViewInit钩子中就能直接获取到两个指令的有效引用。

内容的提问来源于stack exchange，提问作者Tim Capps