在 angular 中使用 HostListener 来正确操作父元素

Question

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

前提是我有这种结构：

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

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

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

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

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

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

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

Answer 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>