关于angular：ngx-bootstrap popover无法正常工作


ngx-bootstrap popover is not working properly

我正在使用ngx-bootstrap popover。我希望弹出窗口在悬停时打开，并且如果打开了新窗口，则所有打开的窗口都应关闭。

工作示例

根据要求，我希望以上示例应由父组件控制，目标弹出窗口位于子组件中。我需要此来满足模块化要求

在子组件html中演示ngFor 这是错误的演示

父组件html

中的更新演示ngFor

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
    <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>

TS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private _currentPopover: any;

@Input() varArr;

ngOnInit() {

}

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

  this._currentPopover = popover;
}
相关讨论