Question

Ionic中的某些组件无法提供失去焦点时发出的事件。

例如ion-input提供了ionBlur。另一方面，还有ion-content之类的其他元素，我需要检测外部点击，但不知道要使用哪个事件。

有没有一种方法可以实现这一目标，而不仅限于文档中的the proposed events？

Answer 1

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

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
}

Answer 2

是的，距要求已经7个月了。

遇到同样的问题；这解决了问题

TS

FormsModule

HTML

import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [],
  providers: [],
  bootstrap: []
})
export class AppModule { }

检测元素外部的点击

2 个答案: