ngx-bootstrap 弹出窗口无法正常工作

ngx-bootstrap popover is not working properly

我正在使用 ngx-bootstrap popover。我希望弹出窗口应该在悬停时打开,如果打开新的弹出窗口应该关闭所有打开的弹出窗口。

working example

根据要求,我希望上面的示例应该由父组件控制,目标弹出窗口位于子组件中。我需要这个来满足模块化要求

Demo ngFor in child component html 这是错误的 demo

Updated demo 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]

}

在popover中有需要点击的按钮。如果我使用 triggers="mouseenter:mouseleave" 我不能点击 popover

里面的按钮

只需设置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;
}

我更改了您的代码,希望这是您需要的

here

更新:

here is the final code