Angular中如何通过TemplateRef访问模板内的DOM元素？

首先明确两个核心问题：

1. 你的类型声明错误：TemplateRef 并非 QueryList<ElementRef>，正确类型应为 TemplateRef<any>。
2. <ng-template> 是惰性模板，本身不会渲染到DOM中，内部元素只有在模板被实例化后才会存在，因此无法直接通过TemplateRef访问内部元素。

方法一：静态实例化模板后通过引用变量获取元素 #

步骤1：修改HTML结构，给模板内元素加引用变量并实例化模板 #

<ng-template #template1>
    <div #div1>element one</div>
    <div #div2>element two</div>
    <div #div3>element three</div>
</ng-template>

<!-- 必须通过*ngTemplateOutlet实例化模板，否则内部元素不会存在于DOM -->
<ng-container *ngTemplateOutlet="template1"></ng-container>

步骤2：在组件类中获取元素 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 正确的模板引用类型
  @ViewChild('template1', { static: false }) template: TemplateRef<any>;

  // 获取单个指定元素
  @ViewChild('div1', { static: false }) singleDiv: ElementRef;

  // 获取所有目标元素的列表
  @ViewChildren('div1, div2, div3') allDivs: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    // 访问单个元素
    if (this.singleDiv) {
      console.log('单个div内容:', this.singleDiv.nativeElement.textContent.trim());
    }

    // 遍历所有div元素
    this.allDivs.forEach((div, index) => {
      console.log(`第${index+1}个div内容:`, div.nativeElement.textContent.trim());
    });
  }
}

方法二：动态实例化模板并获取元素 #

如果需要在组件逻辑中动态创建模板实例，可通过ViewContainerRef创建嵌入式视图，再从视图中直接获取元素：

组件代码 #

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

@Component({
  selector: 'app-your-component',
  template: `
    <ng-template #template1>
      <div>element one</div>
      <div>element two</div>
      <div>element three</div>
    </ng-template>
    <!-- 用于承载动态创建的视图容器 -->
    <div #viewContainer></div>
  `
})
export class YourComponent implements AfterViewInit {
  @ViewChild('template1', { static: false }) template: TemplateRef<any>;
  @ViewChild('viewContainer', { read: ViewContainerRef, static: false }) container: ViewContainerRef;

  ngAfterViewInit(): void {
    // 创建嵌入式视图，将模板渲染到指定容器中
    const embeddedView = this.container.createEmbeddedView(this.template);
    
    // 获取视图中的根节点（即模板内的三个div元素）
    const divElements = embeddedView.rootNodes as HTMLElement[];
    
    divElements.forEach((div, idx) => {
      console.log(`动态实例化的第${idx+1}个div:`, div.textContent.trim());
    });
  }
}

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