typescript - Angular: Hur man upptäcker växlingsstatus i ng-bootstrap-dropdown där det finns flera dropdowns

Jag ställde nyligen denna fråga och den fick ett bra svar.

Men jag har en annan fråga: Hur kan man upptäcka växlingsstatus i ng-bootstrap dropdown där det finns flera dropdowns?

När jag försöker göra det returnerar det endast statusen för den första rullgardinsmenyn. Jag kan inte använda ett unikt id eftersom de inte innehåller 'isopen()'-metoden.

Hur kan jag upptäcka växlingsstatus i ng-bootstrap dropdown där det finns flera dropdowns?

Svar #1

varför inte använda (openChange)???? se 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>

OBS: Om vi kan hänvisa till rullgardinsmenyn skriver vi

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

}

UPPDATERING, de officiella dokumenten för ngbDropdown finns här. Det kan vara svårt att förstå API:et, så försök förklara kortfattat

Inmatningar är egenskaper som vi kan lägga till i .html som

<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'" ...>

Returnerar sedan "events", om ett värde returneras får vi svaret med hjälp av $event, t.ex.

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

Och Metoder är en metod som vi kan använda i .ts är vi har en ViewChild eller ViewChildren

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

@ViewChild('myngbDropDown') mydrop:nhbDropDown;

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

Svar #2

Jag skulle göra något liknande detta:

Jag hämtar alla dropdowns med ViewChildren

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

Då skulle jag ändra checkDropDown-metoden på detta sätt:

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())
}

Du bör även ändra din HTML-fil genom att använda 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>

Jag släpper också här en fungerande StackBlitz.

P.S. Dina knappar har samma ID:n, ta bort dem: dropdownConfig

Relaterade artiklar