我正在使用ngx-bootstrap popover。我希望弹出窗口在悬停时打开,并且如果打开了新窗口,则所有打开的窗口都应关闭。
根据要求,我希望以上示例应由父组件控制,目标弹出窗口位于子组件中。我需要这个来满足模块化要求
Demo ngFor子组件html中的 这是错误的演示
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]
}
在弹出窗口中,需要单击一些按钮。如果我使用triggers =“ mouseenter:mouseleave”,则无法单击弹出框内的按钮
答案 0 :(得分:0)
只需设置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;
}
答案 1 :(得分:0)