Angular跨组件获取模板引用#pdfData报错：nativeElement未定义

问题根源 #

1. Angular组件有封装性，父组件无法直接通过@ViewChild获取子组件模板内的元素引用
2. 子组件里的#pdfData是在*ngFor循环中定义的，会生成多个DOM元素，单例的ElementRef无法匹配

步骤1：子组件暴露表格元素集合 #

修改UserPatientsReportFormTemplateComponent，通过@ViewChildren获取所有表格元素，并提供对外访问的方法：

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

@Component({
  selector: 'app-user-patients-report-form-template',
  templateUrl: './user-patients-report-form-template.component.html'
})
export class UserPatientsReportFormTemplateComponent {
  @ViewChildren('pdfData') pdfDataElements: QueryList<ElementRef>;

  // 给父组件提供获取所有表格元素的方法
  getPdfElements(): ElementRef[] {
    return this.pdfDataElements.toArray();
  }
}

步骤2：父组件通过子组件实例获取元素 #

修改UserPatientsReportFormComponent，先获取子组件实例，再通过实例拿到表格元素：

import { Component, ViewChild } from '@angular/core';
import { UserPatientsReportFormTemplateComponent } from './user-patients-report-form-template.component';

@Component({
  selector: 'app-user-patients-report-form',
  templateUrl: './user-patients-report-form.component.html'
})
export class UserPatientsReportFormComponent {
  // 获取子组件实例
  @ViewChild(UserPatientsReportFormTemplateComponent) templateComp: UserPatientsReportFormTemplateComponent;

  downloadPDF(isSubmit: any) {
    const doc = new jsPDF();
    const pdfElements = this.templateComp.getPdfElements();
    
    if (!pdfElements.length) {
      console.error('未找到可生成PDF的表格元素');
      return;
    }

    let yOffset = 15;
    const elementHandlers = {
      '#editor': (element: any, renderer: any) => true
    };

    // 遍历所有表格，逐个添加到PDF
    pdfElements.forEach((el, index) => {
      doc.fromHTML(el.nativeElement.innerHTML, 15, yOffset, {
        width: 190,
        elementHandlers
      });
      // 非最后一个表格添加分页
      if (index !== pdfElements.length - 1) {
        doc.addPage();
        yOffset = 15;
      }
    });

    doc.save('patient-report.pdf');
  }
}

步骤3：确保父组件模板正确引用子组件 #

父组件模板中必须正确使用子组件的选择器，例如：

<app-user-patients-report-form-template></app-user-patients-report-form-template>
<button (click)="downloadPDF(false)" [disabled]="!hubxReportList?.length">下载PDF</button>

额外注意事项 #

• 必须确保hubxReportList数据加载完成后再调用downloadPDF，否则*ngFor未渲染，无法获取元素
• 如果不需要多表格PDF，可以去掉循环逻辑，子组件改用@ViewChild获取单个元素

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