问题的根本原因是，在使用iFrame的srcdoc属性时，无法访问iFrame文档中嵌入的HTML元素。 因此，Angular Hostlistener事件无法监听到。

要解决这个问题，可以在iFrame加载后手动注入脚本。 这可以通过添加EventListener并在处理脚本时使用postMessage实现。

以下是示例代码：

parent.component.html：

parent.component.ts：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('myiFrame') iframe: ElementRef;

  iframeContent = 'Click me!';

  ngAfterViewInit() {
    const iFrameWindow = this.iframe.nativeElement.contentWindow;
    const myButton = iFrameWindow.document.getElementById('myButton');

    iFrameWindow.addEventListener('message', (event) => {
      if (event.data === 'buttonClicked') {
        console.log('Button clicked!');
      }
    });

    myButton.addEventListener('click', () => {
      iFrameWindow.postMessage('buttonClicked', '*');
    });
  }
}

child.component.ts：

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    
Child Component
  `,
})
export class ChildComponent implements OnInit {
  ngOnInit() {
    console.log('Child component initialized!');
  }

  @HostListener('window:message', ['$event'])
  onMessage(event: MessageEvent) {
    if (event.data === 'buttonClicked') {
      console.log('Button clicked in child component!');
    }
  }
}

在这个示例中，我们向iFrame中添加了一个内容为“Click me”的按钮。 当用户单击该按钮时，我们使用postMessage发送一条消息