以角度使用 HostListener 正确操作父元素答案

【问题标题】：Using HostListener in angular to manipulate parent elements properly以角度使用 HostListener 正确操作父元素
【发布时间】：2021-08-09 01:14:50
【问题描述】：

我的脑海中仍然有一些简单的 js/jquery 想法，并且正在努力获得处理这个问题的“角度方式”。

前提是我有这种结构：

<div ContainerBox class="draggableContainer">
    <div>
        <div DragHandle class="dragHandle">
        </div>
    </div>
</div>

（注意，ContainerBox 的 HTML 在一个组件模板中，DragHandle 的 HTML 在另一个组件模板中）

这里的目标是当用户点击并拖动子元素DragHandle时使ContainerBox在屏幕上移动

我最初使用[DragHandle] 作为选择器设置了一个指令。这允许我设置一个mousedown HostListener 来确定用户何时点击了该对象。

但是...我没有看到一个干净的“角度方式”来改变两个父母的 div 的 css。我想我可以创建一个抓取父元素的 JS 函数，检查匹配的类名“draggableContainer”，如果是，完成，如果没有，抓取该元素的父元素，再次检查，依此类推，直到找到父元素匹配。但这感觉很混乱。

或者，我可以通过设置选择器将我的指令应用于[ContainerBox]。在鼠标按下时，我可以相应地检查event.target。但我也不确定这是否是最好的方法。

这些选项中的任何一个都是更好的选择吗？还是有另一种更“类似角度”的方式来处理这种逻辑？

【问题讨论】：

您是否考虑过只使用the drag/drop CDK module 可能会让生活更轻松？
同上 Chris 所说的，没有比 cdk 更“有棱有角”的了
+1 库推荐，但简而言之，您的ContainerBox 将通过@Input 接收数据，而您的DragHandle 将通过@Output 和EventEmitter 将事件向上发送。
如果你想坚持目前的方法，我建议 a service 优于 @Input/@Output 链。

标签： angular dom-events angular-directive

【解决方案1】：

更好的方法是使用父容器组件和子容器来操作。但是，如果您只需要编写的代码：

<div containerBox class="draggableContainer" #containerBox="containerBox">
    <div>
        <div class="dragHandle" (click)="containerBox.someAction()" (drag)="containerBox.someAction()">
        </div>
    </div>
</div>

并在您的 containerBox 指令中添加 someAction 方法或类似的东西。重要的标记是在@Directive装饰器中设置exportAs: 'containerBox'。

在其他情况下，您可以将 containerBox 元素用作 HTMLElement：

<div containerBox class="draggableContainer" #containerBox>
    <div>
        <div class="dragHandle" (click)="...containerBox here is HTMLElement... you can change any style or class, and more...">
        </div>
    </div>
</div>

【讨论】：