Javascript 检测ngx引导模式内的点击事件

我已经按照本指南实现了ngx引导模式-。但是当模态打开时，我如何检测模态体中的任何单击事件。我的应用程序组件中有以下代码

我用viewChild尝试过这一点，但当我在打开模式后在模式内部单击时，总是返回未定义

应用程序组件HTML-

应用程序组件ts-

---

我不确定直接在模态体DOM中绑定事件处理程序有什么问题。试试下面的方法

模板

创建模板模式 情态动词 &时代； 一些示例文本 点击我 控制器

导出类AppComponent{ modalRef:BsModalRef； 构造函数私有modalService:BsModalService{}

---

OpenModelTemplate:TemplateRef

您使用ViewChild的代码在哪里？@Ramesh我已经更新了代码，请检查并告诉我是否有任何解决方案。不要听模式单击，而是听文档单击并根据事件目标进行筛选，只需确保在关闭模式时您没有听回那些eve因为它是开着的document@Monis你能分享一些例子吗？this.document.addEventListener'click'，event=>{console.logevent.target//just target your classes}这不是一种非常优雅的方式，但它是解决问题的方法之一

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" #modalBody>
    This is a modal.
  </div>
</ng-template>

import { Component, TemplateRef, OnInit, ViewChild, ElementRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
  '(document:click)': 'closemodal($event)'
  }
})

export class AppComponent mplements OnInit{
  @ViewChild('modalBody', { static : false}) modalBody : ElementRef;
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  ngOnInit() {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }


  closemodal(event : any) {
    if (!this.modalBody.nativeElement.contains(event.target)){
       console.log('clicked in the modal')
    }
  }
}