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

Question

我在我的 angular 应用程序中使用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>

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

在比较的 TS 中：

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

但是this.dropdown返回undefined并说 close 方法不是与之关联的 function 。 我还尝试使用 templateRef 对 select 的所有下拉菜单进行操作，但这也不起作用。

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;

}