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

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

<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 元素只是组件外观的粗略近似值。

另见

更新

Angular 5 不支持像 document:...

这样的全局事件处理程序

改用命令式变体

class AutoSuggestComponent implements AfterViewInit, OnDestroy {
  bool show = false;

  @ViewChild('suggestbox') ElementRef suggestbox;

  StreamSubscription _docClickSub;

  @override
  void ngAfterViewInit() {
    _docClickSub = document.onClick.listen((e) {
      if((suggestbox.nativeElement as HtmlElement).contains(e.target)) {
        // inside the dropdown
      } else {
        // outside the dropdown
      }
    });
  }

  @override
  void onDestroy() {
    _docClickSub?.cancel();
  }
}

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

Angular 2 Dart: How to detect click on everything but element?

events

dart

angular-dart

angular2-dart

angular