Question

在一个组件中包含许多不同组件的应用中，我有一个自定义自动建议框。如果用户点击自动建议框（或包含自动建议框的元素），则应关闭该框。

这就是我在jQuery中要做的事情：

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

然而，在我的Angular Dart模板中，我有：

的index.html：

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

我可以想到检测my-app组件中最顶层包装器上的点击并将操作发送到子组件的可能性，但这仍然不是正文点击。

解决这个问题的最佳方法是什么？

Answer 1

<main>': undefined method

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

没有经过测试，而button和div元素只是组件外观的粗略近似值。

另见How can I close a dropdown on click outside?

<强>更新

Angular 5不支持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 } } }

等全局事件处理程序

使用命令式变体

document:...

Angular 2 Dart：如何检测点击除元素之外的所有内容？

1 个答案: