Angular 2+ Как я могу вызвать директиву toggle по событию mouseleave в компоненте-брате - PullRequest
Новая
       22

Angular 2+ Как я могу вызвать директиву toggle по событию mouseleave в компоненте-брате

1 голос
/ 08 мая 2019

Когда мышь пользователя входит в желтый квадрат (находится в желтом компоненте), запускается директива appToggle (делая isActive = true), изменяя фон квадратов на серый, это работает .

Однако я хотел бы иметь возможность запускать директиву через компонент-брат (синий квадрат, найденный в синем компоненте), создавая (isActive = false), когда указатель мыши уходит в синий квадрат.

См. Пример кода stackblitz, показывающий проблему .

toggle.directive.ts 

  @HostListener('mouseleave', ['$event'])
  onMouseLeave(event) {
    if (event.target.classList.contains('blue')) {
      this.isActive = false;
    }
  }

Проблема в том, что ... 

event.target.classList.contains('blue')

полностью игнорируется, я не получаю ошибок, но на самом деле ничего не происходит.

Я искал везде, чтобы найти похожий пример, который мог бы решить эту проблему, но не смог.

Любая помощь будет принята с благодарностью, большое спасибо заранее, ребята!

Ответы [ 2 ]

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

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

@HostListener('document:mouseout', ['$event'])
  onMouseOut(event) {
    if (event.target.classList.contains('blue')) {
      this.isActive = false;
    }
  }

Для краткости и если кому-то еще это интересно, я также обновил stackblitz с рабочим решением

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

Указанная вами директива ничего не знает о синем квадрате.

Из документов: 

The @HostListener decorator lets you subscribe to events of the DOM element that hosts an attribute directive

https://angular.io/guide/attribute-directives#directives-overview

Так event.target в вашем случае содержит ссылку на желтый квадрат

Вы можете достичь желаемого эффекта несколькими путями, но наиболее разумным, вероятно, является создание двух директив:

appToggle - должен переключать свое состояние при вводе мышью

appToggleSwitch - следует принять ссылку (https://angular.io/guide/template-syntax#ref-vars) на компонент, который необходимо изменить при каком-либо событии:

appToggleSwitch директива: 

  @Input('appToggleSwitch') componentToToggle: any;

  @HostListener('mouseleave', ['$event'])
  onMouseLeave(event) {
    this.componentToToggle.classList.add('grey');
  }

Компонент приложения: 

<div class="yellow" appToggle #yellow></div>
<div class="blue" [appToggleSwitch]=yellow></div>
...