Angular 14中如何全局实现CdkDrag以作用于所有MatDialog？

可以通过全局自定义指令实现一次性配置所有MatDialog的拖拽功能，无需逐个修改组件，具体步骤如下：

方案实现步骤 #

1. 创建全局拖拽指令 #

新建一个Angular指令，自动为所有MatDialog的内容容器添加拖拽能力：

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

@Directive({
  selector: '.mat-dialog-content:not(.no-drag)',
  standalone: true, // 独立组件项目保留此行；模块式项目删除，将指令加到AppModule的declarations数组
  host: {
    '[cdkDrag]': 'true',
    '[cdkDragRootElement]': '".mat-dialog-container"'
  },
  providers: [CdkDrag, CdkDragHandle]
})
export class MatDialogAutoDragDirective {
  constructor(private el: ElementRef, private drag: CdkDrag) {
    // 可选配置：仅允许点击对话框标题栏拖拽
    const titleElement = this.el.nativeElement.closest('.mat-dialog-container')?.querySelector('.mat-dialog-title');
    if (titleElement) {
      this.drag.handle = titleElement;
    }
  }
}

2. 全局注册指令 #

• 模块式项目：将指令添加到AppModule的declarations和exports数组中；
• 独立组件项目：在bootstrapApplication的imports数组中引入该指令。

3. 按需排除特定对话框 #

如果某些对话框不需要拖拽功能，打开时添加panelClass: 'no-drag'即可：

this.dialog.open(YourTargetComponent, {
  panelClass: 'no-drag'
});

原理说明 #

这个指令通过选择器.mat-dialog-content:not(.no-drag)匹配所有MatDialog的内容容器，利用Angular的host属性自动注入cdkDrag相关配置，同时通过CdkDrag实例配置拖拽根元素（对话框容器）和可选的拖拽手柄（标题栏）。所有符合条件的对话框都会自动拥有拖拽能力，无需在每个组件中重复编写指令。

内容的提问来源于stack exchange，提问作者Sri Kailash