Угловая начальная загрузка Popover при зависании закрывается, когда мы выходим на улицу.Popover должен быть открыт, когда наведите курсор на сам контент поповера - PullRequest
Новая
       10

Угловая начальная загрузка Popover при зависании закрывается, когда мы выходим на улицу.Popover должен быть открыт, когда наведите курсор на сам контент поповера

0 голосов
/ 12 мая 2019

Я использую PopoverModule из ng-bootstrap. у нас есть возможность открыть всплывающее окно при наведении. В моем всплывающем окне есть ссылка на другую страницу. Я не могу навести курсор на содержимое всплывающего окна, тогда всплывающее окно просто исчезает:

Код TS: 

import {  PopoverModule} from 'ng-bootstrap';  

imports: [PopoverModule.forRoot()]

HTML код: 

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

Может ли кто-нибудь мне помочь

1 Ответ

0 голосов
/ 12 мая 2019

ПРОВЕРКА РАБОЧИЙ ШТИКБЛИЦ

Я написал 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>

Также проверьте установку и использование для ng-bootstrap

Надеюсь, это полезно!

...