Question

当用户的鼠标进入黄色方块（位于黄色组件中）时，会触发appToggle指令（使isActive = true），将方块背景更改为灰色，这有效。

但是，当用户的鼠标左键为蓝色方块时，我希望能够通过同级组件（蓝色方块中的蓝色方块）触发指令（isActive = false）。

请参阅stackblitz code example showing the problem。

toggle.directive.ts

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

问题是...

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

被完全忽略，我没有收到任何错误，但实际上没有任何反应。

我到处搜索以找到类似的示例，该示例可能解决了此问题，但未能成功。

任何帮助将不胜感激，在此先感谢大家！

Answer 1

您应用的指令对蓝色方块一无所知。

从文档中

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>

Answer 2

我找到了一个可行的解决方案mouseout，该解决方案利用了鼠标事件冒泡。代码更改为以下内容...

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

为简洁起见，如果有人对我感兴趣，我也更新了stackblitz with the working solution

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

2 个答案: