如何使角形材质对话框可拖动 [英] How to make angular material dialog draggable

问题描述

是否可以使Angular Material对话框可拖动?因为经过大量时间的搜索之后，我没有找到一个非常明确的答案.

Is it possible to make a Angular Material Dialog draggable? because after a loosing a lot of time for searching i didn't found a very clear answer.

推荐答案

是的，通过使用 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:: 查看全文