Как сделать так, чтобы Angular Material Dialog можно было изменять в Angular 7?

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

По моему опыту, вы можете перезаписать max-width свойства оверлея, диалогового контейнера и определить resize . Вы должны закончить что-то вроде этого:

.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

Работает, но только с ! Важный оператор. Попробуйте поиграть с вашим кодом, чтобы найти обходной путь, чтобы не использовать его. Я уверен, что вы знаете, что ! Важный не лучшая практика CSS.