Angular 8 中的可拖動和可調整大小的墊子對話框

Question

尋找一種能夠使 mat-dialog 既可拖動又可調整大小的方法。 到目前為止，我已經使用 cdkDrag (DragDropModule) 完成了可拖動部分。 我試過使用調整大小：展位； 在 css 中，但它似乎與可拖動功能結合使用時效果不佳。 即，如果我刪除 cdk 可調整大小的作品，反之亦然。

請參閱此處的代碼： https://stackblitz.com/edit/angular-vp8xt7

Answer 1

在您的StackBlitz中，對話框的右下角會出現一個調整大小的句柄，因此您就快到了。 問題是鼠標事件被拖動功能消耗，而不是交給調整大小功能。

將cdkDragHandle添加到h1元素可以解決您的問題。

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>

看看它在你的分叉StackBlitz上是如何工作的。

Answer 2

對於可調整大小的墊子對話框組件：

像這樣將 css 用於面板 class ..

.custom-mat-dialog-panel .mat-dialog-container { 
  resize: both;
}

ts文件：

openDialog() {
    this.dialog.open(HelloComponent,{height:'100px',width:'100px', panelClass: 'custom-mat-dialog-panel'});
}

對於可拖動的墊子對話框組件：

<div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
 Draggable Title
</div>