我的应用程序中有自定义下拉列表 . 我需要处理组件外部的点击以隐藏下拉列表 . 我想动态地制作它 .

HostListener 不是这种情况,因为它为页面上的所有下拉组件添加了事件侦听器 . 所以我决定用 renderer.listener 动态添加和删除监听器 . 所以我有用户点击输入元素时触发的函数:

onClickInput() {
 if (this.isOpened) {
  return this.isOpened = false;
 }
 this.clickOutsideHandler();
}

clickOutsideHandler 的位置是:

clickOutsideHandler() {
 this.clickOutside = this.renderer.listen('document', 'click', (evt) => {
  if (!this.el.nativeElement.contains(evt.target) && this.isOpened) {
    this.isOpened = false;
    this.cdRef.detectChanges();
    this.clickOutside();
  }
 });
}

它是使用 this.cdRef.detectChanges() 的最佳解决方案,因为当我在 renderer.listener 中更改 this.isOpened = false; 时,角度没有更新视图 . 有没有更好的方法来做到这一点?