在 ngx 引导模式中检测 Click 事件答案

【问题标题】：Detect Click event inside ngx bootstrap modal在 ngx 引导模式中检测 Click 事件
【发布时间】：2020-10-03 00:15:49
【问题描述】：

我已经按照本指南 - https://valor-software.com/ngx-bootstrap/#/modals#bs-modal-service 实现了一个 ngx 引导模式。但是当模态打开时，我如何检测模态体内的任何点击事件。我的应用组件中有以下代码。

我已经用 viewChild 试过了，但是当我在打开模式后点击它时总是返回 undefined。

应用组件 HTML -

<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>

应用组件 ts -

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')
    }
  }
}

【问题讨论】：

你使用ViewChild的代码在哪里？
@Ramesh 我已经更新了代码，请检查并让我知道是否有任何解决方案。
不是听模式点击，而是听document 点击并根据event-target过滤掉，只要确保当你关闭模式时你没有听回那些事件，因为它是在document
@Monis 你能分享一些例子吗？
this.document.addEventListener('click',(event)=>{ console.log(event.target) // just target your classes }) 这不是一个非常优雅的方式，但其中一种解决方法

标签： javascript angular ngx-bootstrap

【解决方案1】：

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

模板

<button style="margin: 10px" type="button" class="btn btn-success" (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">
    <span style="cursor: pointer" (mouseup)="textClick($event)">Some sample text</span>
    <br><br>
    <button type="button" class="btn btn-primary" (click)="onClick($event)">Click me</button>
  </div>
</ng-template>

控制器

export class AppComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

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

  textClick(event: any) {
    console.log('text clicked inside modal body');
  }

  onClick(event: any) {
    console.log('button clicked inside modal body');
  }
}

工作示例：Stackblitz

【讨论】：