如果你想在 Angular 中获取 iframe 对象并确保 iframe 加载完成后调用 postMessage 发送消息，可以按照以下步骤进行操作：

1. 在 HTML 模板中，使用 ngIf 来控制 iframe 的显示与隐藏，并为 iframe 添加一个标识符（例如 #myFrame）：

<button (click)="showIframe()">Show Iframe</button><iframe *ngIf="isIframeVisible" #myFrame (load)="onIframeLoad()"></iframe>

1. 在组件的 TypeScript 文件中，定义相应的方法来处理 iframe 的加载和 postMessage 操作：

import { Component, ViewChild, ElementRef } from '@angular/core';@Component({selector: 'app-your-component',templateUrl: './your-component.component.html',styleUrls: ['./your-component.component.css']
})
export class YourComponent {@ViewChild('myFrame', { static: false }) myFrame: ElementRef;isIframeVisible: boolean = false;showIframe() {this.isIframeVisible = true;}onIframeLoad() {const iframe = this.myFrame.nativeElement;// 确保 iframe 加载完成后调用 postMessage 发送消息iframe.contentWindow.postMessage('Your message', '*');}
}

在这个示例中，当点击按钮显示 iframe 后，ngIf 会根据条件渲染 iframe，同时会触发 iframe 的 load 事件，调用 onIframeLoad() 方法。在该方法中，通过 @ViewChild 获取到 iframe 元素的引用，然后可以访问 iframe 的 contentWindow 属性来发送 postMessage 消息。

方式二

作为 Angular 专家，你可以通过 ViewChild 和 ElementRef 来获取当前的 iframe 对象，并在 iframe 加载完成后调用 postMessage 方法发送消息。以下是一个示例代码：

首先，在你的组件模板中，定义一个按钮和一个带有 #myIframe 的 iframe：

<button (click)="showIframe()">显示iframe</button>
<iframe #myIframe style="display: none;" width="600" height="400" src="https://www.example.com"></iframe>

然后在你的组件类中，导入 ViewChild 和 ElementRef：

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

接着在组件类中添加 ViewChild 和 ElementRef 的实例，并创建一个方法来显示 iframe：

export class YourComponent {@ViewChild('myIframe', { static: false }) myIframe: ElementRef;showIframe() {this.myIframe.nativeElement.style.display = 'block';this.myIframe.nativeElement.onload = () => {this.postMessageToIframe();};}postMessageToIframe() {const iframeWindow = this.myIframe.nativeElement.contentWindow;iframeWindow.postMessage('Hello from parent!', 'https://www.example.com');}
}

在上面的代码中，我们使用 ViewChild 装饰器来获取带有 #myIframe 标识的 iframe 元素。然后在 showIframe() 方法中，当按钮被点击时，显示 iframe，并监听 iframe 的 onload 事件。一旦 iframe 加载完成，就会调用 postMessageToIframe() 方法。

在 postMessageToIframe() 方法中，我们获取 iframe 的 contentWindow，并使用 postMessage 方法向 iframe 发送消息。

这样，当点击按钮显示 iframe 时，确保 iframe 已加载完成后会发送一条消息给 iframe。

方式三, 获取iframe对象。

  @ViewChildren('iframeTest') iframes: QueryList<ElementRef>;ngAfterViewInit() {this.iframes.changes.subscribe((queryList: QueryList<ElementRef>) => {if (queryList.length > 0) {this.iframeTest = queryList.first;console.log('this.iframeTest', this.iframeTest);setTimeout(() => {this.iframeTest.nativeElement.contentWindow.postMessage({ destination: 'test' },'http://xx.xxxx.xx.xx:3000');}, 1000);}});console.log('ifrmatest11111111111viewinit', this.iframeTest1);}// 发送消息
var targetWindow = document.getElementById('target-frame').contentWindow;
var targetOrigin = 'https://www.example.com'; // 目标窗口的origin
targetWindow.postMessage('Hello', targetOrigin);// 接收消息
window.addEventListener('message', function(event) {if (event.origin === 'https://www.example.com') {// 处理来自指定源的消息console.log('Received message: ' + event.data);}
});window.addEventListener('message', this.receiveMessage.bind(this), false);window.parent.postMessage({ destination: 'test' },'http://xxx.xxx.xxxx.xxx:4200');@HostListener('window:message', ['$event'])public onPostMessage(event) {if (event.origin === window.location.origin && event.data.id) {const message: Message = event.data;this.id = message.id;this.description = message.description;}}