Как сохранить динамическое отображение всплывающих окон при наведении

Question

Я создал динамическое всплывающее окно под углом, которое появляется при наведении курсора на диапазон (или кнопку), но исчезает при выходе из этого диапазона. Я не могу понять, как сохранить это всплывающее окно, когда я нахожу над ним. Должен быть какое-то простое решение, я думаю (Буду признателен за любую помощь.

Вот ссылка на приложение https://stackblitz.com/edit/angular-khoagq

Answer 1

На случай, если кому-то интересно.Мне удалось решить это.Отредактировал его по той же ссылке https://stackblitz.com/edit/angular-khoagq / Что я сделал: - переместил управление всплывающим состоянием из директивы в компонент;- добавлена ​​директива хоста, которая будет содержать динамический компонент.Я все еще не удовлетворен этим решением.Хотелось бы иметь что-то более многократно используемое вместо того, чтобы копировать методы управления в каждый компонент, где я хочу иметь всплывающее окно.

Answer 2

если вы не хотите скрывать всплывающее окно при отпускании мыши, вам нужно удалить эту часть кода в вашем файле popup.directive:

 ngOnDestroy() {
    this.hideCallout();
  }



@HostListener('mouseleave')
  hideCallout() {
    if (this.calloutRef && !this.isClicked) {
     this.calloutRef.destroy();
     this.calloutRef = null;
    }
  }