如何在 Angular 7 中调整 Angular Material 对话框的大小？

Question

我正在使用Angular Material 对话框和AngularJS 7。我可以拖动对话框，但我想调整该对话框的大小，以便用户可以将其大小调整为他想要的大小。

    const dialogRef = this.dialog.open(DialogCompComponent,{data : "hello"});
      dialogRef.afterClosed().subscribe(result => {
        console.log(`Dialog closed: ${result});
    });

其中DialogCompComponent是对话框内容组件。如何使这个角度材质对话框可调整大小？

Answer 1

根据我的经验，您可以覆盖覆盖包装器、对话框容器的max-width属性并定义resize。你应该以这样的方式结束：

.cdk-overlay-pane{
  width: unset !important;
  height: unset !important;
  max-width: 100% !important;
}

.mat-dialog-container{
  max-width: 100%;
  max-height: 100% !important;
  resize: both;
}

尝试重现它：https://stackblitz.com/edit/angular-material-dialog-resize-vbom8f ?file=src%2Fstyles.css

有效，但仅适用于!important声明。尝试使用您的代码来找到不使用它的解决方法。我相信您知道，!important并不是最好的 CSS 实践。

Answer 2

我设法解决了您的问题，如下面的代码所示：

import { Component, Input , OnInit} from '@angular/core';
import {MatDialogRef} from '@angular/material';
import {HostListener } from '@angular/core'

@Component({
  selector: 'hello',
  template: `
  <div id='chat' [style.top.px]='y'  
                 [style.left.px]='x' 
                 [style.width.px]='width'
                 [style.height.px]='height'
                 (mousedown)='onWindowPress($event)'
                 (mousemove)='onWindowDrag($event)'>
        <div (mousedown)='onCornerClick($event, topLeftResize)' id='chat-top-left-resize' class='chat-corner-resize'></div>
        <div (mousedown)='onCornerClick($event, topRightResize)' id='chat-top-right-resize' class='chat-corner-resize'></div>
        <div (mousedown)='onCornerClick($event, bottomLeftResize)' id='chat-bottom-left-resize' class='chat-corner-resize'></div>
        <div (mousedown)='onCornerClick($event, bottomRightResize)' id='chat-bottom-right-resize' class='chat-corner-resize'></div>
    </div>
  `,
  styles: [`#chat {
            background-color: white;
            opacity: 0.8;
        }   
        .chat-corner-resize {

            width: 10px;
            height: 10px;
        }
        #chat-top-left-resize { top: 0px; left: 0px; }
        #chat-top-right-resize { top: 0px; right: 0px; }
        #chat-bottom-left-resize { bottom: 0px; left: 0px; }
        #chat-bottom-right-resize { bottom: 0px; right: 0px; }`]
})
export class HelloComponent  implements OnInit{
  @Input() name: string;
  x: number;
  y: number;
  px: number;
  py: number;
  width: number;
  height: number;
  minArea: number;
  draggingCorner: boolean;
  draggingWindow: boolean;
  resizer: Function;
  constructor(public dialogRef: MatDialogRef<HelloComponent>){
    this.x = 0;
    this.y = 0;
    this.px = 0;
    this.py = 0;
    this.width = 300;
    this.height = 150; 
    this.draggingCorner = false;
    this.draggingWindow = false;
    this.minArea = 200
  }

  ngOnInit(){

  }
    area() {
    return this.width * this.height;
  }

  onWindowPress(event: MouseEvent) {
    this.draggingWindow = true;
    this.px = event.clientX;
    this.py = event.clientY;
  }

  onWindowDrag(event: MouseEvent) {
     if (!this.draggingWindow) {
        return;
    }
    let offsetX = event.clientX - this.px;
    let offsetY = event.clientY - this.py;

    this.x += offsetX;
    this.y += offsetY;
    this.px = event.clientX;
    this.py = event.clientY;
  }

  topLeftResize(offsetX: number, offsetY: number) {
    this.x += offsetX;
    this.y += offsetY;
    this.width -= offsetX;
    this.height -= offsetY;
  }

  topRightResize(offsetX: number, offsetY: number) {
    this.y += offsetY;
    this.width += offsetX;
    this.height -= offsetY;
  }

  bottomLeftResize(offsetX: number, offsetY: number) {
    this.x += offsetX;
    this.width -= offsetX;
    this.height += offsetY;
  }

  bottomRightResize(offsetX: number, offsetY: number) {
    this.width += offsetX;
    this.height += offsetY;
  }

  onCornerClick(event: MouseEvent, resizer?: Function) {
    this.draggingCorner = true;
    this.px = event.clientX;
    this.py = event.clientY;
    this.resizer = resizer;
    event.preventDefault();
    event.stopPropagation();
  }

  @HostListener('document:mousemove', ['$event'])
  onCornerMove(event: MouseEvent) {
    if (!this.draggingCorner) {
        return;
    }
    let offsetX = event.clientX - this.px;
    let offsetY = event.clientY - this.py;

    let lastX = this.x;
    let lastY = this.y;
    let pWidth = this.width;
    let pHeight = this.height;

    this.resizer(offsetX, offsetY);
    if (this.area() < this.minArea) {
        this.x = lastX;
        this.y = lastY;
        this.width = pWidth;
        this.height = pHeight;
    }
    this.px = event.clientX;
    this.py = event.clientY;
  }

  @HostListener('document:mouseup', ['$event'])
  onCornerRelease(event: MouseEvent) {
    this.draggingWindow = false;
    this.draggingCorner = false;
  }
}


app.component.ts

import { Component } from '@angular/core';
import {MatDialog} from '@angular/material';
import {HelloComponent} from './hello.component';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private dialog:MatDialog){

  }

  openDialog(){
    this.dialog.open(HelloComponent);
  }
}

app.component.html

<button type="button" (click)="openDialog()">Open</button>

style.css

.mat-dialog-container{
          padding:0px!important;
        }

让我知道这是否解决了您的问题！