如何使角度材质对话框可拖动[重复]

Posted 2023-05-08

【中文标题】如何使角度材质对话框可拖动[重复]

【英文标题】：How to make angular material dialog draggable [duplicate]

【发布时间】：2018-07-20 00:10:19

【问题描述】：

是否可以使 Angular 材质对话框可拖动？因为在搜索了很多时间之后，我没有找到一个非常明确的答案。

【参考方案1】：

是的，这已包含在 Angular Material 版本 7+ 更新中，通过使用 cdkDragRootElement

这是从material.angular.io复制的示例

HTML：

<button (click)="openDialog()">Open a draggable dialog</button>

<ng-template>
  <div class="example-dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
    Drag the dialog around!
  </div>
</ng-template>

TS：

export class CdkDragDropRootElementExample implements AfterViewInit, OnDestroy 
  @ViewChild(TemplateRef) _dialogTemplate: TemplateRef<any>;
  private _overlayRef: OverlayRef;
  private _portal: TemplatePortal;

  constructor(private _overlay: Overlay, private _viewContainerRef: ViewContainerRef) 

  ngAfterViewInit() 
    this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);
    this._overlayRef = this._overlay.create(
      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
      hasBackdrop: true
    );
    this._overlayRef.backdropClick().subscribe(() => this._overlayRef.detach());
  

  ngOnDestroy() 
    this._overlayRef.dispose();
  

  openDialog() 
    this._overlayRef.attach(this._portal);
  

Stackblitz： Draggable Dialog

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

注明。我会更新答案。谢谢！