Question

我正在使用角度材料对话框和 AngularJS 7 。我可以拖动对话框，但是我想使该对话框的大小可调整，以便使用过的对话框可以将其调整为他想要的大小。

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

其中 DialogCompComponent 是对话框的内容组件。如何使这种棱角分明的对话框可调整大小？

Answer 1

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

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;
        }

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

Answer 2

根据我的经验，您可以覆盖叠加层包装，对话框容器的最大宽度属性，并定义调整大小。您应该以这样的结尾：

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

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

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

有效，但只能使用 ！important 语句。尝试使用您的代码来查找不使用它的解决方法。我确定您知道 ！important 不是最佳的CSS做法。

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

2 个答案: