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;

}

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

1 个答案: