Обнаружить щелчок за пределами элемента

Question

В Ionic есть некоторые компоненты, которые не предоставляют событие, которое генерируется при потере фокуса.

Например, ion-input обеспечивает ionBlur. С другой стороны, есть другие элементы, такие как ion-content, где мне нужно обнаружить внешний щелчок, но не зная, какое событие использовать.

Есть ли способ достичь этого, не ограничиваясь предлагаемыми событиями в документации?

Answer 1

Я нашел эту статью , в которой показан способ использования настраиваемой директивы для обнаружения внешнего щелчка:

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
}