ngx-bootstrap 弹出窗口无法正常工作
ngx-bootstrap popover is not working properly
我正在使用 ngx-bootstrap popover。我希望弹出窗口应该在悬停时打开,如果打开新的弹出窗口应该关闭所有打开的弹出窗口。
根据要求,我希望上面的示例应该由父组件控制,目标弹出窗口位于子组件中。我需要这个来满足模块化要求
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;
}
我更改了您的代码,希望这是您需要的
更新:
我正在使用 ngx-bootstrap popover。我希望弹出窗口应该在悬停时打开,如果打开新的弹出窗口应该关闭所有打开的弹出窗口。
根据要求,我希望上面的示例应该由父组件控制,目标弹出窗口位于子组件中。我需要这个来满足模块化要求
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;
}
我更改了您的代码,希望这是您需要的
更新: