Angular 角度：如何在ng引导下拉列表中检测切换状态，其中有多个下拉列表

我最近问过，答案很好

但我还有另一个问题：在ng引导下拉列表中，如果有几个下拉列表，如何检测切换状态

When仅返回第一个下拉列表的状态。我不能使用唯一id，因为它们不包含“isopen（）”方法

---

如何在ng引导下拉列表中检测切换状态，其中有多个下拉列表？

我会这样做：

我使用

ViewChildren

@ViewChildren(NgbDropdown)
dropdowns: QueryList<NgbDropdown>;
dropdown: NgbDropdown;

您还应使用template ref更改html文件：

<div #drop1 ngbDropdown>
<button class="btn btn-outline-primary" ngbDropdownToggle (click)="checkDropDown(drop1)">Toggle-1</button>

...

<div #drop2 ngbDropdown>
<button class="btn btn-outline-primary" ngbDropdownToggle (click)="checkDropDown(drop2)">Toggle-2</button>

开关-1
...
开关-2

我也在这里工作

注意：您的按钮具有相同的ID，请删除它们：

dropdownConfig

为什么不使用（openChange）？？？？看

开关-1
行动-1
另一个动作
这里还有别的东西

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

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

}

....
检查下拉列表（打开：布尔值，下拉列表：NgbDropdown）{
console.log（打开、下拉、放置）
}

更新，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'" ...>

//或
//如果是字符串，不要忘记使用简单的引号，例如。

输出子“events”，如果返回一个值，我们将使用$event获得响应，例如

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

//如果我们可以发送更多的参数，很简单

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

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

@ViewChild('myngbDropDown') mydrop:nhbDropDown;

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

@ViewChild（'myngbDropDown'）mydrop:nhbDropDown；
ngOnAtferView（）
{
console.log（this.mydrop.isOpen（））
}

为什么不使用（openChange）？？？？因为作为一个初学者，如果没有一个例子，你就无法真正理解文档。。。只是帮助理解文档@EliseoYeah使用openChange比单击要好，但我不确定您的checkDropDown方法是否是最佳实践。考虑一下，如果您在ts中引用了一个下拉列表（例如ViewChild）。使用“我的解决方案”，您可以随时检查其状态，而您的解决方案受openChange事件的约束。我将用一个用例更新stackblitz。@Eliseo看一看。这就是我所说的。费德里科加菲奥尼，你所说的其实是真的，而且是一个非常有趣的观察，@Eliseo应该在公认的答案中包含一个指向你答案的链接，供任何寻找你的人在未来轻松找到特定的解决方案。对于任何想知道更多的人来说，这里是“开放的改变”@Eliso请在您的答案中添加文档链接。这对让人们更好地理解代码有很大帮助。对不起@YulePale，你没事。我更新了我的答案，简单地解释了一些文档，我希望这能有所帮助

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

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

@ViewChild('myngbDropDown') mydrop:nhbDropDown;

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