Angular:如何在有多个下拉菜单的 ng-bootstrap 下拉菜单中检测切换状态
Angular: How to detect toggle status in ng-bootstrap dropdown where there are several dropdowns
我最近问了,得到了很好的回答。
但我还有一个问题:如何在有多个下拉菜单的 ng-bootstrap 下拉菜单中检测切换状态?
当I try doing it returns 仅显示第一个下拉列表的状态。我不能使用唯一 ID,因为它们不包含 'isopen()' 方法。
如何检测 ng-bootstrap 下拉菜单中有多个下拉菜单的切换状态?
我会这样做:
我用 ViewChildren
得到了所有的下拉菜单
@ViewChildren(NgbDropdown)
dropdowns: QueryList<NgbDropdown>;
dropdown: NgbDropdown;
然后我会这样改变checkDropDown
方法:
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())
}
您也应该更改 html 文件,使用模板 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
为什么不使用(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 的官方文档是here。可能很难理解 API,所以,试着解释一下 sucintaly
输入是我们可以添加的属性。html as
<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",如果 return 一个值,我们使用 $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())
}
我最近问了
但我还有一个问题:如何在有多个下拉菜单的 ng-bootstrap 下拉菜单中检测切换状态?
当I try doing it returns 仅显示第一个下拉列表的状态。我不能使用唯一 ID,因为它们不包含 'isopen()' 方法。
如何检测 ng-bootstrap 下拉菜单中有多个下拉菜单的切换状态?
我会这样做:
我用 ViewChildren
@ViewChildren(NgbDropdown)
dropdowns: QueryList<NgbDropdown>;
dropdown: NgbDropdown;
然后我会这样改变checkDropDown
方法:
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())
}
您也应该更改 html 文件,使用模板 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
为什么不使用(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 的官方文档是here。可能很难理解 API,所以,试着解释一下 sucintaly
输入是我们可以添加的属性。html as
<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",如果 return 一个值,我们使用 $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())
}