Angular: Как определить состояние переключения в выпадающем меню ng-bootstrap, где есть несколько выпадающих - PullRequest
Новая
       23

Angular: Как определить состояние переключения в выпадающем меню ng-bootstrap, где есть несколько выпадающих

1 голос
/ 07 июня 2019

Я недавно задал этот вопрос , и на него был дан хороший ответ.

Но у меня есть еще один вопрос: как определить состояние переключения в выпадающем меню ng-bootstrap, где есть несколько выпадающих меню?

Когда Я пытаюсь это сделать возвращает только статус первого раскрывающегося списка. Я не могу использовать уникальный идентификатор, так как они не содержат метод isopen ().

Как я могу определить состояние переключения в выпадающем меню ng-bootstrap, где есть несколько выпадающих меню?

Ответы [ 2 ]

3 голосов
/ 07 июня 2019

Я бы сделал что-то вроде этого:

Я получаю все выпадающие списки с помощью 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 .

PS Вашкнопки имеют одинаковые идентификаторы, удалите их: dropdownConfig

1 голос
/ 07 июня 2019

почему бы не использовать (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, поэтому попытайтесь объяснить sucintaly

Входные данные - это свойства, которые мы можем добавить в .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())
}
...