nz-modal2种最简方式实现可拖拽功能

依赖@angular/cdk/drag-drop

npm i @angular/cdk -S

import对应DragDropModule模块

imports:[
...
DragDropModule,
...
]

DragDrop服务create可拖拽元素

nz-modal模态框2 种方式创建

1. 使用模板定义

<nz-modal #modal nzTitle="标题" [(nzVisible)]="visible">
Conent More.
</nz-modal>

@ViewChild('modal')
modal: NzModalComponent;

constructor(
private drag: DragDrop,
){}

ngAfterViewInit(): void{    	
this.drag.create(this.modal.modalRef.containerInstance.modalElementRef.nativeElement);
}

2. 使用服务创建

constructor(
private modal: NzModalService,
private drag: DragDrop,
){}

ngAfterViewInit(): void{
	const modalInst = this.modal.create({
    	nzTitle: '标题'，
        nzContent: '内容',
    });
    
    this.drag.create(this.modalInst.containerInstance.modalElementRef.nativeElement);
}

ng serve -o 查看nz-modal拖拽效果

可将上面2种方式封装为组件进行使用，屏蔽实现细节，提升高可用性