Angular如何在子组件类内部访问传入的TemplateRef模板内容

核心结论 #

不能直接通过传入的TemplateRef实例获取模板内的DOM内容，原因如下：

• Angular的TemplateRef是未渲染模板的抽象引用，仅存储模板的编译描述信息，没有对应实际生成的DOM节点，所以直接读取TemplateRef的属性是拿不到h1元素的。
• 只有先把TemplateRef渲染为真实视图之后，才能访问到内部的DOM内容。

实现方案示例 #

如果确实需要获取模板内的DOM，可通过子组件的ViewContainerRef先渲染模板再读取节点：

// ComponentA 实现代码
import { Component, Input, TemplateRef, ViewContainerRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'component-a',
  template: `<ng-container #renderContainer></ng-container>`,
  styles: [`#renderContainer { display: none; }`] // 不需要展示的话可以隐藏容器
})
export class ComponentA implements AfterViewInit {
  @Input() template1?: TemplateRef<any>;

  constructor(private viewContainer: ViewContainerRef) {}

  ngAfterViewInit() {
    if (!this.template1) return;
    // 渲染模板为嵌入式视图
    const embeddedView = this.viewContainer.createEmbeddedView(this.template1);
    // 触发变更检测确保DOM渲染完成
    embeddedView.detectChanges();
    // 获取渲染后的根节点，本示例中第一个根节点就是h1
    const h1Dom = embeddedView.rootNodes.find(node => node.tagName === 'H1') as HTMLElement;
    console.log(h1Dom.innerText); // 输出 Hello
  }
}

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