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

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])在特定元素上创建句柄。这个应该能解决你的案子。