Angular 2 Dart: How to detect click on everything

On an app with a lot of different components within one component I have a custom Auto-suggest box. The box should be closed if the user clicks anywhere but on the Auto-suggest box (or containing elements of the auto-suggest box).

This is what I would do in jQuery:

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

However In my Angular Dart templates I have:

index.html:

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

I can think of a possibility in detecting a click on the topmost wrapper within the my-app component and send the action to the subcomponent but this is still not a body click.

What is the best way to solve this?

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

1条回答

淡お忘

2楼-- · 2019-02-17 18:21

<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
    }
  }      
}

not tested and the button and div element are only a rough approximation of what the component would look like.

update

Angular 5 doesn't support global event handlers like document:...

Use instead the imperative variant

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

0人赞添加讨论(0) 举报

Angular 2 Dart: How to detect click on everything

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间