Ionic framework 检测图元外部的单击

Ionic中的某些组件不提供焦点丢失时发出的事件

例如，

ioninput

提供了

ionBlur

。另一方面，还有其他元素，如

ion content

，我需要检测外部点击，但不知道使用哪个事件

有没有一种方法可以在不受文档限制的情况下实现这一点？

我发现它显示了一种使用自定义指令检测外部点击的方法：

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef : ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter();

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(null);
        }
    }
}

在相关模块中声明该指令后，可以这样使用该指令：

<!-- HTML Template -->
<ion-content (clickOutside)="handleOutsideClick()"><!-- ... --></ion-content>

<!-- Typescript code -->
handleOutsideClick() {
    //Handle My outside Click
}

handleOutsideClick（）{
//处理我的外部点击
}

是的，自从被问起已经7个月了

被同样的问题绊倒；这就解决了问题

TS

@ViewChild('content') content: ElementRef

@HostListener('document:click', ['$event'])
  andClickEvent(event) { 
    if (!this.content.nativeElement.contains(event.target)) {
      if (!this.navCtrl.isTransitioning() && this.navCtrl.getActive()) {
        this.close()
      }
    }
  }

HTML

<ion-content #content>