AngularJs2 在组件中获取元素的 find() 方法

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() 方法

AngularJs2 get the find() method in component for element

components

find

event-handling

angular