如何以角度从父组件触发 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.component.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>到目前为止我尝试过的是：在compParent TS 中：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;

}