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

【问题标题】：Angular 2 Dart: How to detect click on everything but element?Angular 2 Dart：如何检测除元素之外的所有内容的点击？
【发布时间】：2017-10-12 00:19:48
【问题描述】：

在一个组件中包含许多不同组件的应用程序中，我有一个自定义的自动建议框。如果用户单击自动建议框（或包含自动建议框的元素）以外的任何位置，则该框应关闭。

这就是我在 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 组件中最顶层包装器的点击并将操作发送到子组件的可能性，但这仍然不是正文点击。

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

【问题讨论】：

标签： angular events dart angular-dart angular2-dart

【解决方案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 元素只是组件外观的粗略近似。

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

更新

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();
  }
}

【讨论】：