Angular问题：如何获取TemplateRef的nativeElement？解决ngTemplateOutlet注入模板后获取元素引用及高度的问题

嘿，我来帮你搞定这个Angular模板引用的问题！你遇到的情况其实挺常见的，先给你拆解一下核心原因：TemplateRef本身并不是真实的DOM元素，它只是Angular用来封装模板内容的抽象对象；而<ng-container>是个逻辑容器，渲染后不会生成真实DOM节点，只会留下一个注释节点，这就是为啥你拿到的nativeElement是注释的原因。

下面分两个问题给你具体的解决方案：

1. 获取传入模板中特定元素的高度 #

这里有几种实用的方案，按推荐程度排序：

方案一：模板引用变量 + @ViewChild（最推荐） #

如果你能控制传入的模板内容，直接给目标元素加个模板引用变量（比如#targetElement），然后在子组件里用@ViewChild就能拿到它。不过要注意，因为模板是动态渲染的，得在AfterViewInit钩子里才能获取到元素：

子组件代码：

import { Component, Input, TemplateRef, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<ng-container *ngTemplateOutlet="template"></ng-container>`
})
export class ChildComponent implements AfterViewInit {
  @Input() template: TemplateRef<any>;
  @ViewChild('targetElement', { static: false }) targetElement: ElementRef;

  ngAfterViewInit() {
    if (this.targetElement) {
      const height = this.targetElement.nativeElement.offsetHeight;
      console.log('目标元素高度:', height);
    }
  }
}

父组件传模板时：

<app-child [template]="myTemplate"></app-child>

<ng-template #myTemplate>
  <div #targetElement>我是传入的模板，里面这个div就是要测高度的元素</div>
</ng-template>

方案二：通过子组件的ElementRef查DOM #

如果没法修改传入的模板（比如模板来自第三方组件），可以在子组件里拿到自身的根元素，然后用原生DOM的查询方法找目标元素：

子组件代码：

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

@Component({
  selector: 'app-child',
  template: `<ng-container *ngTemplateOutlet="template"></ng-container>`
})
export class ChildComponent implements AfterViewInit {
  @Input() template: TemplateRef<any>;

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    // 假设目标元素有特定类名，换成你实际的选择器就行
    const targetElement = this.el.nativeElement.querySelector('.need-measure');
    if (targetElement) {
      const height = targetElement.offsetHeight;
      console.log('目标元素高度:', height);
    }
  }
}

父组件模板：

<app-child [template]="myTemplate"></app-child>

<ng-template #myTemplate>
  <div class="need-measure">我是要测高度的元素</div>
</ng-template>

方案三：用ViewContainerRef手动嵌入模板（更灵活） #

如果需要更精细控制模板的渲染时机和位置，可以用ViewContainerRef替代ngTemplateOutlet，这样能直接拿到嵌入后的视图引用，进而访问DOM节点：

子组件代码：

import { Component, Input, TemplateRef, ViewContainerRef, AfterViewInit, EmbeddedViewRef } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<div #container></div>`
})
export class ChildComponent implements AfterViewInit {
  @Input() set template(tpl: TemplateRef<any>) {
    if (tpl) {
      // 先清空容器，再嵌入模板
      this.vcr.clear();
      this.embeddedView = this.vcr.createEmbeddedView(tpl);
    }
  }

  private embeddedView: EmbeddedViewRef<any>;

  constructor(private vcr: ViewContainerRef) {}

  ngAfterViewInit() {
    if (this.embeddedView) {
      // 获取模板渲染后的所有根节点
      const rootNodes = this.embeddedView.rootNodes;
      // 找到第一个元素节点（你也可以根据实际条件筛选）
      const targetElement = rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE);
      if (targetElement) {
        const height = targetElement.offsetHeight;
        console.log('目标元素高度:', height);
      }
    }
  }
}

2. 获取TemplateRef对应的DOM内容 #

再次强调：TemplateRef本身没有nativeElement，它的内容只有被渲染后才会生成DOM节点。你可以通过这两种方式获取：

• 如果用ngTemplateOutlet：模板的DOM节点会直接插入到<ng-container>所在的父元素里，给父元素加个引用就能拿到子节点：

<!-- 子组件模板 -->
<div #templateHost>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

// 子组件代码
@ViewChild('templateHost', { static: false }) templateHost: ElementRef;

ngAfterViewInit() {
  const templateDomNodes = this.templateHost.nativeElement.children;
  console.log('模板渲染后的DOM节点:', templateDomNodes);
}

• 如果用ViewContainerRef.createEmbeddedView：直接从返回的EmbeddedViewRef对象里拿rootNodes属性，里面就是模板渲染后的所有DOM节点（参考方案三）。

内容的提问来源于stack exchange，提问作者Mr.FloppyDisk