Как я могу сохранить загрузчик popover живым, пока popover находится в Angular 2, 4, 5, 6? - PullRequest
Новая
       24

Как я могу сохранить загрузчик popover живым, пока popover находится в Angular 2, 4, 5, 6?

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

Я просмотрел много постов на SO, связанных с popover, я заканчиваю в angularjs или javascript посте. Этот пост объясняет то же требование, которое мне нужно, но ответ написан на Java-скрипте, и они используют bootstrap3.

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

<ng-template #popTemplate id="commentPopover">
   <div style="max-height: 6em;overflow: auto;" id="divPopover">
       {{ Comment }}
   </div>
</ng-template>
<span [popover]="popTemplate" placement="bottom" triggers="mouseenter:mouseleave">
      <i class="icon"></i>
</span>

1 Ответ

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

Я публикую грязное исправление в качестве ответа, но все еще есть другие решения. приветствуется.

После поиска решения я в конечном итоге занялся грязным исправлением. Обрабатывается открытие и закрытие или всплывающее окно с помощью события ввода / вывода с помощью мыши.

Component.ts: 

mouseleave(popover: any) {
  this.hidePopOver(popover);
}

  hidePopOver(popover: any) {
    setTimeout(() => {
      if (!isNullOrUndefined(popover)) {
        popover.hide();
      }
    }, 500);
  }

  showPopOver(pop: any, comment: string) {
    if (comment === null || comment === '') {
      return;
    }
    if (!isNullOrUndefined(pop)) {
      pop.show();
    }
  }

component.html: 

<div (mouseleave)="mouseleave(popover)">
  <ng-template #popTemplate id="commentPopover">
    <div style="max-height: 6em;overflow: auto;" id="divPopover"
          (mouseenter)="showPopOver(popover, Comment)" (mouseleave)="hidePopOver(popover)">
       {{ Comment }}
    </div>
  </ng-template>
  <span [popover]="popTemplate" placement="bottom" (mouseenter)="showPopOver(popover,Comment)">
      <i class="icon"></i>
  </span>
</div>
...