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

【问题标题】：AngularJs2 get the find() method in component for elementAngularJs2 在组件中获取元素的 find() 方法
【发布时间】：2016-06-24 09:54:50
【问题描述】：

在这里我想检查一下，如果用户在我的“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;
}

}

【问题讨论】：

也许你可以使用，querySelectorAllquerySelectorAll(this.templateRef.nativeElement, 'copy-me')

标签： angular event-handling find components

【解决方案1】：

使用contains，

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

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

    if(isClickOutside) {
        return;
    }

    this.showValue = false;
}

【讨论】：