Angular:如何在有多个下拉菜单的ng-bootstrap下拉菜单中检测切换状态 [英] Angular: How to detect toggle status in ng-bootstrap dropdown where there are several dropdowns

问题描述

我最近问了

I recently asked this question and it was well answered.

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

But I have another question: How to detect toggle status in ng-bootstrap dropdown where there are several dropdowns?

当我尝试这样做会返回仅firstdropdown的状态.我不能使用唯一的ID，因为它们不包含"isopen()"方法.

When I try doing it returns the status of the firstdropdown only. I cannot use a unique id as they don't contain the 'isopen()' method.

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

How can I detect toggle status in ng-bootstrap dropdown where there are several dropdowns?

推荐答案

我会做这样的事情:

我使用ViewChildren

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

然后我将以这种方式更改checkDropDown方法:

Then I would change checkDropDown method in this way:

checkDropDown(dropdown: any) {
  // Check which dropdown was clicked
  this.dropdown = this.dropdowns.find(x => (x as any)._elementRef.nativeElement == dropdown)
  // Check if the clicked dropdown is open
  console.log(this.dropdown.isOpen())
}

您还应该使用模板ref来更改html文件:

You should change your html file as well, by using template ref:

<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>

我在这里工作的 StackBlitz 也是.

P.S.您的按钮具有相同的ID，请将其删除:dropdownConfig

P.S. Your buttons have the same ids, remove them: dropdownConfig

这篇关于Angular:如何在有多个下拉菜单的ng-bootstrap下拉菜单中检测切换状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！