Блог

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

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

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

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», я не могу нажимать кнопки внутри всплывающего окна

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

здесь

Обновить:

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

Просто установите 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 amp;amp; this._currentPopover !== popover) {
    this._currentPopover.hide();
  }

  this._currentPopover = popover;
}