我正在使用ngx-bootstrap popover。我希望popover应该在悬停时打开,如果打开新的那个,应该关闭所有打开的popover。
根据我的要求,我希望上面的示例应该由父组件控制,目标popover在子组件中。我需要这个模块化要求
Demo ngFor在子组件html中 这是错误的演示
父组件html中的Updated demo ngFor
父组件
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”我无法单击popover内的按钮
只需设置triggers="mouseenter:mouseleave"
见:https://ng-bootstrap.github.io/#/components/popover/examples#triggers
更新:
由于新的要求,这里有一个更改版本,关闭旧的popover并让我们点击里面的按钮:
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;
}