Question

我正在使用ng-bootstrap中的PopoverModule。我们可以选择在悬停时打开弹出窗口。在我的弹出窗口中，我有一个href链接到另一个页面。我无法将鼠标悬停在弹出窗口的内容上，然后弹出窗口消失了：

TS代码：

import {  PopoverModule} from 'ng-bootstrap';  

imports: [PopoverModule.forRoot()]

HTML代码：

<div  container="body" placement="bottom"  [popover]="popContent"  triggers="mouseenter:mouseleave"  popoverTitle="title">

有人可以帮我吗

Answer 1

检查WORKING STACKBLITZ

我写了一个sticky-popover.directive.ts可用于实现此功能：〜

import {
  ElementRef,
  Directive, Input, TemplateRef,
  EventEmitter,
  Renderer2,
  Injector,
  ComponentFactoryResolver,
  ViewContainerRef,
  NgZone,
  OnInit,
  OnDestroy,
  Inject,
  ChangeDetectorRef
} from '@angular/core';

import { DOCUMENT } from '@angular/common';
import { NgbPopover, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
@Directive({
  selector: '[stickyPopover]',
  exportAs: 'stickyPopover'
})
export class StickyPopoverDirective extends NgbPopover implements OnInit, OnDestroy {
  @Input() stickyPopover: TemplateRef<any>;

  popoverTitle: string;

  placement: 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | ('auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom')[];

  triggers: string;
  container: string;
  ngpPopover: TemplateRef<any>;
  canClosePopover: boolean;

  toggle(): void {
    super.toggle();
  }

  isOpen(): boolean {
    return super.isOpen();
  }

  constructor(
    private _elRef: ElementRef,
    private _render: Renderer2,
    injector: Injector,
    componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
    config: NgbPopoverConfig,
    ngZone: NgZone,
    private changeRef: ChangeDetectorRef,
    @Inject(DOCUMENT) _document: any) {
    super(_elRef, _render, injector, componentFactoryResolver, viewContainerRef, config, ngZone, _document, changeRef);
    this.triggers = 'manual';
    this.popoverTitle = '';
    this.container = 'body';
  }

  ngOnInit(): void {
    super.ngOnInit();
    this.ngbPopover = this.stickyPopover;

    this._render.listen(this._elRef.nativeElement, 'mouseenter', () => {
      this.canClosePopover = true;
      this.open();
    });

    this._render.listen(this._elRef.nativeElement, 'mouseleave', (event: Event) => {
      setTimeout(() => { if (this.canClosePopover) { this.close(); } }, 100);

    });

    this._render.listen(this._elRef.nativeElement, 'click', () => {
      this.close();
    });
  }

  ngOnDestroy(): void {
    super.ngOnDestroy();
  }

  open() {
    super.open();
    setTimeout(() => {
      const popover = window.document.querySelector('.popover');
      this._render.listen(popover, 'mouseover', () => {
        this.canClosePopover = false;
      });

      this._render.listen(popover, 'mouseout', () => {
        this.canClosePopover = true;
        setTimeout(() => { if (this.canClosePopover) { this.close(); } }, 0);
      });
    }, 0);
  }

  close() {
    super.close();
  }
}

使用自定义指令将您的component.html修改为以下内容：〜

<ng-template #popTemplate id="commentPopover">
    <div style="max-height: 6em;overflow: auto;" id="divPopover">
        {{ comment }}
    </div>
    <a href="https://yourwebpage.com" target="_blank">Open your webpage</a> 
</ng-template>
<span [stickyPopover]="popTemplate" placement="bottom" triggers="manual">
  <i class="icon">Hover over me!</i>
</span>

Also check Installation and Usage for ng-bootstrap

希望这会有所帮助！

当我们移到外面时，悬停时的角引导程序Popover将关闭。当悬停在弹窗内容本身上时，弹窗应打开

1 个答案:

检查WORKING STACKBLITZ