Javascript 如何从angular中的父组件触发ngbDropdown方法？

我在角度应用程序中使用了

NgbDropdown

。我有两个组件CompParent和CompChild。其中compChild保存用于下拉的HTML，并将其包含在CompParent中。当

可滚动div

上发生滚动事件时，我正在尝试关闭页面中所有打开的下拉列表

comp-child.component.html：

行动
编辑
复制品
移动
删除

@ViewChild

和

@ViewChildren

只能从组件本身而不是从childs查询元素。可能的选择是在child中有一个对下拉列表的公共引用，在parent中有对child的引用

家长：

export class CompParentComponent{
  @ViewChildren(CompChild) compChild!: QueryList<CompChild>;

  @HostListener('scroll', ['$event'])
  closeAllDropdowns(event) {
    this.compChild.forEach(dropdown => dropdown.close());
  }

}

---

工作起来很有魅力。救了我一天。谢谢

export class CompChildComponent{

  @ViewChild(NgbDropdown) public dropdown: NgbDropdown;

}