时间戳

首页 > 解决方案 > Angular：如何在有多个下拉列表的 ng-bootstrap 下拉列表中检测切换状态

angular - Angular：如何在有多个下拉列表的 ng-bootstrap 下拉列表中检测切换状态

问题描述

我最近问了这个问题，得到了很好的回答。

但我还有另一个问题：如何在有多个下拉菜单的 ng-bootstrap 下拉菜单中检测切换状态？

当我尝试这样做时，它只返回 firstdropdown 的状态。我不能使用唯一 ID，因为它们不包含“isopen()”方法。

如何检测 ng-bootstrap 下拉菜单中的切换状态，其中有多个下拉菜单？

标签： angulartypescriptbootstrap-4toggleng-bootstrap

解决方案

为什么不使用（openChange）？？？见stackblitz

<div #drop1 ngbDropdown (openChange)="checkDropDown($event,1)">
  <button class="btn btn-outline-primary" ngbDropdownToggle >Toggle-1</button>
  <div ngbDropdownMenu aria-labelledby="dropdownConfig">
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

注意：如果我们可以参考下拉列表，我们会写

<div #drop1="ngbDropdown" 
      ngbDropdown (openChange)="checkDropDown($event,drop1)">
....
</div>
checkDropDown(open:boolean,dropdown: NgbDropdown) {
    console.log(open,dropdown.placement)

}

更新，ngbDropdown 的官方文档在这里。可能很难理解 API，所以，试着简单地解释一下

输入是我们可以在 .html 中添加的属性

<div ngbDropdown [propertie]="variable"..>
//or
<div ngbDropdown propertie="valor" ...>
//if is a string, don't forget use simple quotes e.g.
<div ngbDropdown autoClose="'outside'" ...>

输出子“事件”，如果返回一个值，我们使用 $event 得到响应，例如

<div ngbDropdown (openChange)="myFunction($event)" ...>
//If we can send more arguments, simply
<div ngbDropdown (openChange)="myFunction($event,"some more")" ...>

方法是我们可以在 .ts 中使用的方法是我们有一个 ViewChild 或 ViewChildren

<div #myngbDropdown ngbDropdown [propertie]="variable"..>

@ViewChild('myngbDropDown') mydrop:nhbDropDown;

ngOnAtferView()
{
    console.log(this.mydrop.isOpen())
}

推荐阅读