如何以角度从父组件触发 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{&nbsp; @ViewChildren(CompChild) compChild!: QueryList<CompChild>;&nbsp; @HostListener('scroll', ['$event'])&nbsp; closeAllDropdowns(event) {&nbsp; &nbsp; this.compChild.forEach(dropdown => dropdown.close());&nbsp; }}孩子：export class CompChildComponent{&nbsp; @ViewChild(NgbDropdown) public dropdown: NgbDropdown;}