Question

我的应用程序中的每个对话框或多或少都像这样：

<custom-dialog-container>
    <custom-dialog-header>...</custom-dialog-header>
    <custom-dialog-content>
        ...
    </custom-dialog-content>
    <custom-button>
        ...
    </custom-button>
</custom-dialog-container>

我在每个对话框中都使用了一个 custom-dialog-header 指令，最近我发现了通过这样的指令将可拖动效果应用于对话框的方法：

import { DragDrop } from '@angular/cdk/drag-drop';
import { Directive, ElementRef, HostBinding } from '@angular/core';

@Directive({
  selector: 'custom-dialog-header, [customDialogHeader]'
})
export class CustomDialogHeaderDirective {
  @HostBinding('class') class = 'dialog__header';

  constructor(
    element: ElementRef<HTMLElement>,
    dragDrop: DragDrop
  ){
    const availablePanes = document.getElementsByClassName('cdk-overlay-pane');
    const latestPane = availablePanes.item(availablePanes.length - 1);
    const dragRef = dragDrop.createDrag(element);
    dragRef.withRootElement(latestPane as HTMLElement);
  }
}

到目前为止一切顺利，因为一切都几乎按预期进行。
唯一缺少的是仅将区域限制为 <custom-dialog-header></custom-dialog-header>。
现在它被设置为整个对话框（即使从 custom-dialog-content 部分拖动输入也可以拖动整个对话框）。

所以这是我的问题 - 我应该如何实现一个？我已经阅读了许多关于此主题的帖子和文档，但没有发现任何帮助。

Answer 1

您可以使用 dragRef.withHandles([element]) 在特定元素上创建句柄。这个应该可以解决您的问题。

带有自定义指令的可拖动对话框 |角材质

1 个答案: