Angular 11内容投影场景下能否获取带模板变量的元素引用？

首先明确结论：可以获取，你调试得出的@ContentChild配合AfterViewInit生命周期的方案是正确的，获取失败的常见原因和正确实现方式如下：

错误原因说明 #

• 不要使用@ViewChild查询投影内容：@ViewChild仅支持查询当前组件自身模板内声明的元素，通过<ng-content>投影传入的内容不属于组件B自身模板，因此@ViewChild永远无法返回对应引用。
• 不要在ngOnInit生命周期执行查询：ngOnInit触发时，投影内容尚未完成挂载渲染，此时无论用什么查询方式都会返回空值。

正确实现代码 #

组件B的类代码示例：

import { Component, ContentChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-component-b',
  template: `<ng-content></ng-content>`
})
export class ComponentB implements AfterViewInit {
  // 绑定投影内容对应的模板变量名
  @ContentChild('content') contentRef: ElementRef<HTMLDivElement>;
  @ContentChild('button') buttonRef: ElementRef<HTMLButtonElement>;

  ngAfterViewInit(): void {
    // 此处可正常访问两个投影元素的DOM引用
    console.log('content元素：', this.contentRef.nativeElement);
    console.log('button元素：', this.buttonRef.nativeElement);
  }
}

额外注意事项 #

• 如果你使用的是Angular 8及以上版本，@ContentChild支持static配置项：如果你的投影内容不会被*ngIf、*ngFor等结构指令动态增删，可以声明@ContentChild('content', { static: true })，此时可以提前到ngOnInit生命周期拿到引用。
• 如果投影内容中有多个同名模板变量的元素，可以使用@ContentChildren获取QueryList集合，访问规则和@ContentChild一致。

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