Всплывающее окно ngx-bootstrap не работает должным образом

Я использую всплывающее окно ngx-bootstrap. Я хочу, чтобы всплывающее окно открывалось при наведении курсора, и все открытые должны быть закрыты, если открывается новый.

рабочий пример

В соответствии с требованиями, я хочу, чтобы приведенный выше образец контролировался родительским компонентом, а целевое всплывающее окно находится в дочернем компоненте. Мне это нужно для требований модульности

Демо ngFor в дочернем компоненте html это неправильная демонстрация

Обновленная демонстрация ngFor в родительском компонент HTML

родительский компонент

export class DemoPopoverFourDirectionsComponent  implements 

AfterViewInit{
  @ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;

  ngAfterViewInit() {
    this.popovers.forEach((popover: PopoverDirective) => {
      popover.onShown.subscribe(() => {
        this.popovers
        .filter(p => p !== popover)
        .forEach(p => p.hide());
      });
    });
  }

varArr=[1,2,3,4]

}

Во всплывающем окне есть кнопки, которые нужно нажимать. Если я использую triggers = "mouseenter: mouseleave", я не могу нажимать кнопки внутри всплывающего окна.


angular ngx-bootstrap
person Patata    schedule 10.04.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я меняю ваш код и надеюсь, что это то, что вам нужно

здесь

ОБНОВЛЕНИЕ:

вот окончательный код

person Ehsan Kiani    schedule 15.04.2019
comment
Спасибо, что код работает в демонстрационной / образцовой программе, но в моем случае это не работает. Разница в том, что дочерний компонент получает данные из API, и есть какая-то задержка. это может быть причиной. - person Patata; 16.04.2019
comment
переместите this.popovers.foreach ... сразу после this.popovers = (items); возможно это исправит это - person Ehsan Kiani; 16.04.2019
comment
спасибо, что справочная консоль показывает журналы, но не работает, угловая версия - 6.1.10, а версия ngx-bootstrap - 3.3.0. Этот вариант вызывает проблему - person Patata; 16.04.2019
comment
нет, проблема не связана. попробуйте добавить this.onFinish.emit (this.popovers); в вашем дочернем компоненте после чтения данных с сервера - person Ehsan Kiani; 16.04.2019
comment
Позвольте нам продолжить это обсуждение в чате. - person Patata; 16.04.2019
comment
Спасибо, что ваше окончательное решение работает, пожалуйста, обновите свой пост, чтобы я мог его принять. - person Patata; 16.04.2019

arrow_upward
0
arrow_downward

Просто установите triggers="mouseenter:mouseleave"

См .: https://ng-bootstrap.github.io/#/components/popover/examples#triggers

Обновление:

Из-за новых требований вот измененная версия, которая закрывает старое всплывающее окно и позволяет нам нажать кнопку внутри:

HTML

<div *ngFor="let d of varArr; let i = index">
    <button type="button" class="btn btn-default btn-secondary"      
          #pop="bs-popover"
          [popover]="popover"
          popoverTitle="Popover on top"          
          placement="right" triggers="mouseenter"          
          (onShown)="closeOldPopover(pop)"
          [outsideClick]="true">
    Popover on top
  </button>

  <ng-template #popover>
    <button (click)="pop.hide()">Test</button>
  </ng-template>
</div>

TS

private _currentPopover: any;

@Input() varArr;

ngOnInit() {

}

public closeOldPopover(popover: any): void {
  if (this._currentPopover && this._currentPopover !== popover) {
    this._currentPopover.hide();
  }

  this._currentPopover = popover;
}
person Mathias Müller    schedule 10.04.2019
comment
Извините, это не решает требования. Прошу прощения за меньшую информацию. Во всплывающем окне есть несколько кнопок, которые нужно нажимать. Если я использую triggers="mouseenter:mouseleave", я не могу нажимать кнопки внутри всплывающего окна - person Patata; 10.04.2019
comment
Хорошо, это новое требование. Затем замените mouseleave на click и немного поиграйте с autoClose ('внутри', 'снаружи', true, false). Думаю, это должно решить вашу проблему. - person Mathias Müller; 10.04.2019
comment
это ngx-bootstrap, а не ng-bootstrap - person Patata; 11.04.2019
comment
@Patata Моя ошибка в ngx-bootstrap, но теперь все правильно. Обновленное решение должно работать на вас. - person Mathias Müller; 11.04.2019
comment
спасибо за обновление, но как я уже упоминал в вопросе As per requirement I want above sample should controlled by parent component and target popover lies in child component. I need this for modularity requirement. Логика скрытия выполняется в дочернем компоненте, и мне нужно сделать это в родительском компоненте - person Patata; 11.04.2019