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