MatDialog 拖放最新的 Angular 版本

Question

我喜欢在 MatDialog 中实现 DragAndDrop。

对于旧版本的 Angular，例如 Angular 7，有一个解决方案，但对于 Angular 17 来说，该解决方案的工作原理不同。

对于 Angular 7，解决方案如下：

您可以简单地使用 @angular/cdk/drag-drop 中的 cdkDrag 指令

dialog.html

<h1 mat-dialog-title 
   cdkDrag
   cdkDragRootElement=".cdk-overlay-pane" 
   cdkDragHandle>
     Hi {{data.name}}
</h1>

这是 Angular 7 的 Stackblitz 示例

重要的是，拖动功能仅在我单击并在对话框标题上移动时才会触发。

当我为 Angular 17 实现此解决方案时，如果我单击并移动对话框上的任何位置（甚至是对话框内容），则会触发拖动功能。

这是 Angular 17 的 Stackblitz 示例

注意：抱歉，我第一次使用 StackBlitz。当我在这里测试我的 StackOverflowQestion 时，这个 StackBlitz 报告了一个错误。但是，如果我在浏览器的 URL 字段中单击 then 并按 Enter 键，则会加载 StackBlitz。不知道为什么会这样。

这种行为很糟糕，因为在移动设备上，如果我在对话框中有可滚动的内容，则该内容将不再可滚动。尝试滚动时，会触发 DragAndDrop。

有没有办法实现一个解决方案，即只有当我单击并在对话框标题上移动时才会触发带有 Angular 17 的 MatDialog 的 DragAndDrop？

Answer 1

您缺少

CdkDragHandle

的导入，这导致该功能无法工作。

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './dialog-content-example-dialog.html',
  standalone: true,
  imports: [
    MatDialogModule, 
    MatButtonModule,
    CdkDragHandle,  // <- changed here!
    CdkDrag
  ],
})
export class DialogContentExampleDialog {}