Question

在这里，我想检查一下，如果用户在我的“DropdownComponent”元素之外单击而不是隐藏一些数据。但是“this.templateRef.nativeElement.find”我无法在angularJS2中获得“find（）”方法。

import { Component, EventEmitter, ElementRef, Output, HostListener } from '@angular/core';    
export class DropdownComponent{
showValue = true;

constructor(private templateRef: ElementRef) {
};

@HostListener('document:click', ['$event'])
handleKeyboardEvent(kbdEvent: any) {
    console.log("---"+ kbdEvent);
    var isClickedElementChildOfDropdownComponent = this.templateRef.nativeElement.find(kbdEvent.target).length > 0;

    if(isClickedElementChildOfDropdownComponent ) {
        return;
    }

    this.showValue = false;
}

}

Answer 1

使用contains，

@HostListener('document:click', ['$event'])
handleKeyboardEvent(kbdEvent: any) {

    var isClickOutside = !this.templateRef.nativeElement.contains(kbdEvent.target);

    if(isClickOutside) {
        return;
    }

    this.showValue = false;
}

AngularJs2获取元素组件中的find（）方法

1 个答案: