Angular 检测在iframe中运行的角度应用程序外部的单击

我正在开发一个嵌入Wordpress页面的Angular应用程序。我正在使用iframe将Angular应用程序嵌入Worpress页面。现在，我的Angular应用程序中有模式对话框，当在对话框外单击时，应该关闭这些对话框。当单击发生在对话框外部和Angular应用程序内部时，这种方法可以正常工作。但是，当点击在iframe之外，wordpress页面上的其他地方时，什么也没有发生。角度事件处理程序似乎无法识别iframe之外的所有单击。
我发现了一些Javascript解决方案，其中iframe之外的页面通过

document.parentElement

引用。在我看来不起作用的情况下，我文档的parentElement是

未定义的


我希望你能理解我的问题所在，建立一个运行的示例需要付出相当大的努力

提前问候和感谢
 尝试使用：

onClickEvent(event){
     window.parent.frames[#frameId].clickEvent(event);
}

角度分量

   constructor(private zone:NgZone) {
       window['clickEvent'] = (event) => {
           zone.run(() => {
               console.log(event);
           });
       };
   }

外部Js:

onClickEvent(event){
     window.parent.frames[#frameId].clickEvent(event);
}

谢谢@Msk Satheesh和@MikeOne，在你们两人的共同提示下，我让它运行起来了

问题是，我可以通过
window.parent
对（外部）wordpress页面进行寻址。但这仅仅是因为两者都在同一个域中运行。再加上Msk Satheesh在他的第一条评论中发布的代码，它是有效的。我甚至不需要做任何超出角度的事情。在Angular中的模态对话框组件中，我放置了以下代码：

  constructor(public dialogRef: MatDialogRef<ResultsDialogComponent>, private eRef: ElementRef) {}
  
  ngOnInit(): void {
    if(!this.onDocumentClickFunction){
      this.onDocumentClickFunction = this.onDocumentClick.bind(this);
    }
    window.parent.addEventListener( 'click', this.onDocumentClickFunction ); 
  }

  onDocumentClick() {    
    this.dialogRef.close();
    this.eRef.nativeElement.click();
  }

  ngOnDestroy() {
    window.parent.removeEventListener( 'click', this.onDocumentClickFunction ); 
  }

constructor（公共dialogRef:MatDialogRef，私有eRef:ElementRef）{}
ngOnInit（）：void{
如果（！this.onDocumentClickFunction）{
this.onDocumentClickFunction=this.onDocumentClick.bind（this）；
}
window.parent.addEventListener（'click'，this.onDocumentClickFunction）；
}
onDocumentClick（）{
this.dialogRef.close（）；
this.eRef.nativeElement.click（）；
}
恩贡德斯特罗（）{
window.parent.removeEventListener（'click'，this.onDocumentClickFunction）；
}

就这样。优雅之处在于，
onDocumentClick（）
仅当单击位于iFrame之外时才会触发。这意味着我不需要额外的逻辑来确定单击是在iFrame内部还是外部。行
this.eRef.nativeElement.click（）是将焦点恢复到iFrame所必需的。如果没有该行，只有用户自己点击iFrame时，模式才会消失。
我的意思是。。。你会期望那样的工作吗？iFrame类似于浏览器中的浏览器，并且相当孤立。如果iframe与父域不同，则也不能使用直接通信形式。解决这个问题的唯一方法是在父级中有一个侦听器，并使用postMessage等机制将其传递给iFrame。这就是为什么iFrames真的很烂；-）也许有一个更简单的方法现在我开始思考它。。。但这并不理想。您可以尝试检测角度应用程序中的窗口模糊，然后关闭模式。。但其副作用可能是它“太容易”关闭…您可以将angular zone用于this.ngZone.runOutsideAngular（（）=>{this.document.addEventListener（'click'，this.onDocumentClick.bind（this））；}）@在我的例子中，两者都运行在同一个域上。我可以构建某种后端来实现两者之间的通信，但我希望有一个更简单的/leightweight解决方案。你所说的检测窗口模糊是什么意思？你是说wordpress页面尝试在Angular应用程序中检测窗口模糊吗？@msksathesh我尝试了你的解决方案，但不起作用。“onDocumentClick”方法仅在单击位于我的Angular应用程序内时触发。外部的点击仍然无法识别。你尝试了我的解决方案，或者你只是说对不起，我误读了，我以为你只是把你先前的评论变成了一个答案。这个我没有开始工作。“行窗口['clickEvent']=（事件）=>…'）被VS代码标记为错误。但是你对我的原创帖子的评论帮助很大，谢谢！