각도 2 다트 : 요소를 제외한 모든 것을 클릭하는 방법을 찾으십니까?

하나의 구성 요소 내에 여러 구성 요소가 많은 앱에서 사용자 지정 자동 제안 상자가 있습니다. 사용자가 자동 제안 상자 (또는 자동 제안 상자의 요소 포함)에서 아무 곳이나 클릭하면 상자가 닫힙니다. 각도 2 다트 : 요소를 제외한 모든 것을 클릭하는 방법을 찾으십니까?

이

내가 jQuery를에서하는 것입니다 :

내 각도 다트 템플릿에서 그러나

$(document).on('click','body',function(e) { 
if(e.target!='.suggestbox' && $(e.target).parent('.suggestbox').length <1) { 
$('.suggestbox').remove(); 
} 
});

는 내가 가진 :

는

index.html을 :

<body> 
<my-app> 
// sub component 
// sub sub component 
</my-app> 
</body>

나는 가능성을 생각할 수 my-app 구성 요소 내의 최상위 래퍼에 대한 클릭을 감지하고 하위 구성 요소로 작업을 보냅니다.하지만 여전히 신체 클릭이 아닙니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

출처

2017-05-12 Blackbam

<button (click)="show = true">show dropdown</button> 
<div #suggestbox *ngIf="show">...</div>

class AutoSuggestComponent { 
    bool show = false; 

    @ViewChild('suggestbox') ElementRef suggestbox; 

    @HostListener('document:click', [r'$event']) 
    onDocumentClick(MouseEvent e) { 
    if((suggestbox.nativeElement as HtmlElement).contains(e.target)) { 
     // inside the dropdown 
    } else { 
     // outside the dropdown 
    } 
    }  
}

는 테스트하지하고 버튼 및 DIV 요소는 구성 요소가 어떻게 보이는지의 대략적인 근사치입니다.

도 참조 Angular2 Close dropdown on click outside, is there an easiest way?

출처

2017-05-12 17:46:08

각도 2 다트 : 요소를 제외한 모든 것을 클릭하는 방법을 찾으십니까?

답변

관련 문제