如何从角度中的父组件触发ngbDropdown方法

Question

我在我的角度应用程序中使用NgbDropdown。我有两个组件CompParent和CompChild。其中compChild保存用于下拉的HTML，并将其包含在CompParent中。当scrollable-div上发生滚动事件时，我正在尝试关闭页面中所有打开的下拉菜单。

comp-child.component.html：

<div ngbDropdown container="body">
<button class="btn btn-outline-primary btn-sm" ngbDropdownToggle>Actions</button>
<div ngbDropdownMenu>
<button ngbDropdownItem>Edit</button>
<button ngbDropdownItem>Duplicate</button>
<button ngbDropdownItem>Move</button>
<div class="dropdown-divider"></div>
<button ngbDropdownItem>Delete</button>
</div>
</div>

CompChild包含在CompParent中，如下所示：

comp-parent.com.ponent.html

<div class="scrollable-div" (scroll)="closeAllDropdowns($event)">
<div class="dropdown-container" *ngFor="let item of items">
<app-comp-child></app-comp-child>
</div>
</div>

到目前为止，我尝试过的是：

在compParentTS:中

export class compParentComponent{
@ViewChild(NgbDropdown) private readonly dropdown: NgbDropdown;
@HostListener('scroll', ['$event'])
closeAllDropdowns(event) {
this.dropdown.close();
}
}

但this.dropdown返回undefined，并表示close方法不是与其关联的函数。此外，我尝试使用templateRef选择所有下拉列表，但也没有成功。

Answer 1

@ViewChild和@ViewChildren只能从组件本身查询元素，而不能从子级查询元素。可能的选项是在子项中具有下拉列表的公共引用，在父项中具有子项的引用。

父级：

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