在Angular 5中更改renderer.listen函数中的模型

Question

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

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()是否是最佳解决方案，因为当我更改this.isOpened = false;中的renderer.listener时，角度没有更新视图。有更好的方法吗？