Angular 2+如何通过同级组件中的mouseleave事件触发切换指令

Question

When the user's mouse enters the yellow square (found in the yellow component) the appToggle directive is triggered (making isActive = true) changing the squares background to grey, .

However I would like to be able to trigger the directive via the sibling component (the blue square found in the blue component) making (isActive = false) when the user's mouseleave's the blue square.

Please see stackblitz code example showing the problem .

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

The problem is that...

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

is being completely ignored, I get no errors, but nothing is actually happening.

I have searched everywhere to find a similar example which might solve this problem but have not been able to.

Any help would be greatly appreciated, many thanks in advance folks!

Answer 1

The directive you applied knows nothing about the blue square.

From the docs:

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

So event.target in your case holds a reference to the yellow square

You can achieve the desired effect via multiple paths, but most reasonable is probably to create two directives:

appToggle - should toggle its state on mouse enter

appToggleSwitch - should accept a reference( https://angular.io/guide/template-syntax#ref-vars ) to the component it needs to change on some event:

appToggleSwitch directive:

  @Input('appToggleSwitch') componentToToggle: any;

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

App component:

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

Answer 2

I found a working solution, mouseout which makes use of mouse event bubbling. Code changed to the following...

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

For the sake of brevity and should anyone else be interested I also updated stackblitz with the working solution