Question

当用户在引导方式对话框之外单击时如何捕获事件？

data() {
    return {
        title: '',
        body: '',
        id: '',
    }
},

mounted() {
    for (var rightHere in this.$store.getters.getObject) {
        if (this.$store.getters.getObject.hasOwnProperty(rightHere )) {
            this.rightHere = this.$store.getters.getObject[rightHere ]
        }
    }
},

Answer 1

您可以如下使用here is a list of the distributions in the stats package。只需将clickOutside事件放在您要捕获外部点击事件的外部标签中即可。

<div class="modal fade" id="itinerary" tabindex="-1" role="dialog" aria-labelledby="modal-large-label" (clickOutside)="onClickedOutside()">
  <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">                      
              <div class="modal-body">    
                    BODY    
              </div>    
        </div>
  </div>

Answer 2

提出的解决方案对我不起作用，我发现了一个工作错误：不允许用户在外部单击时关闭模式页面。只需添加这些属性 data-backdrop =“ static” data-keyboard =“ false”

<div class="modal fade" data-backdrop="static" data-keyboard="false"  id="idmodal" tabindex="-1" role="dialog" aria-labelledby="modal-large-label">
  <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">                      
              <div class="modal-body">    
                    BODY    
              </div>    
        </div>
  </div>

Answer 3

尝试一下：

@ViewChild('modal') modal: ElementRef;    
 ngAfterViewInit() {
     document.addEventListener('click', this.checkIfClickedInside, true);
 }

 checkIfClickedInside = (event: Event) => {
   let isClickInside = this.modal.nativeElement.contains(event.target);
   if (!isClickInside) console.log('clicked outside);
 };

Answer 4

我的可行解决方案是将回调定义为Modal的输入，并在destroy上调用它。

模式开放组件

const modalRef = this._modal.open(MyComponent, options);
modalRef.componentInstance.afterClose = (response) => {
   // desired code here.
}

MyComponent实现OnDestroy

@Input() afterClose: Function; // called after modal is closed.
constructor() {}
ngOnDestroy() {
   this.afterClose(response)
}

角：当用户在引导模式对话框之外单击时，如何捕获事件？

4 个答案: