Angular 16：Chrome出现ElementRef错误，Firefox运行正常

报错TypeError: Cannot read properties of undefined (reading 'nativeElement')的核心原因：

• Chrome和IE中iframe的load事件触发时机早于Angular完成@ViewChild初始化的时机，导致onLoad执行时this.iframe仍为undefined。
• 不同浏览器对iframe文档对象的获取方式存在差异，原代码的兼容处理不完整。

1. 调整初始化与事件监听时机 #

移除模板中的(load)绑定，改为在ngAfterViewInit钩子中手动监听iframe的load事件，确保@ViewChild已成功获取元素：

import { AfterViewInit, Component, ElementRef, ViewChild, ViewContainerRef } from '@angular/core';
import { ReceiptComponent } from './receipt.component';

export class CheckoutComponent implements AfterViewInit {
  @ViewChild('iframe', { read: ElementRef, static: false }) iframe: ElementRef | undefined;
  doc: Document | undefined;

  constructor(private viewContainerRef: ViewContainerRef) {}

  ngAfterViewInit(): void {
    if (this.iframe) {
      const iframeElement = this.iframe.nativeElement;
      iframeElement.addEventListener('load', this.onLoad.bind(this));
    }
  }

  onLoad() {
    if (!this.iframe) return;
    const iframeElement = this.iframe.nativeElement;
    // 兼容多浏览器的文档对象获取逻辑
    this.doc = iframeElement.contentDocument || iframeElement.contentWindow?.document;
    this.doc && this.createComponent();
  }

  createComponent() {
    if (!this.doc) return;
    const component = this.viewContainerRef.createComponent(ReceiptComponent);
    component.setInput('order', this.currentOrder);
    component.location.nativeElement.id = 'receipt';
    
    // 清空iframe原有内容，避免重复挂载
    this.doc.body.innerHTML = '';
    this.doc.body.appendChild(component.location.nativeElement);
    
    // 手动触发变更检测，确保组件在iframe上下文完成渲染
    component.changeDetectorRef.detectChanges();
  }
}

模板代码修改（移除(load)绑定，默认隐藏iframe）：

<iframe #iframe id="iframe" name="iframe" style="display: none;"></iframe>

2. 补充浏览器兼容细节 #

• IE浏览器不支持contentDocument属性，必须通过contentWindow.document获取文档对象，代码中已通过可选链操作符做兼容处理。
• 挂载组件前清空iframe的body内容，避免多次触发load时重复添加组件。
• 手动调用changeDetectorRef.detectChanges()，确保组件在iframe独立上下文里完成数据绑定与渲染。

3. 打印功能优化（可选） #

如果需要自动触发打印，可在组件渲染完成后延迟调用iframe的打印方法：

createComponent() {
  // ... 原有代码
  component.changeDetectorRef.detectChanges();
  
  // 延迟打印确保组件完全渲染
  setTimeout(() => {
    this.iframe?.nativeElement.contentWindow.print();
  }, 100);
}

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