我的应用程序中有自定义下拉列表 . 我需要处理组件外部的点击以隐藏下拉列表 . 我想动态地制作它 .
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;
时,角度没有更新视图 . 有没有更好的方法来做到这一点?