Как получить доступ к ширине / высоте диалогового окна angular материала в коде

Question

Есть ли способ получить доступ к ширине / высоте диалогового компонента, который стилизуется в css? Вот как я создаю диалог

  this.dialogRef = this.dialog.open(MyComponent, {
    position: {
      top: yPos + 'px',
      left: xPos + 'px'
    }
  });

Я хотел бы знать ширину диалога. До сих пор я использую d3, чтобы получить эту информацию.

const dialog = d3.select('#my-dialog');
const bounds = (dialog.node() as HTMLElement).getBoundingClientRect();

Есть ли способ сделать это без d3? Я не вижу в диалоге ничего, что могло бы помочь. this.dialogRef.componentInstance имеет только одно свойство: data.

Спасибо за помощь

Answer 1

Вы можете получить его через DOM ... поэтому после вызова this.dialog.open и затем при каждом изменении размера, потому что изменение размера будет влиять на высоту и ширину

, относящихся * TS :

import {  Component,  Inject,  HostListener,  OnInit} from "@angular/core";
import {  MatDialog,  MatDialogRef,  MAT_DIALOG_DATA} from "@angular/material/dialog";

export interface DialogData {
  animal: string;
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: "dialog-overview-example",
  templateUrl: "dialog-overview-example.html",
  styleUrls: ["dialog-overview-example.css"]
})
export class DialogOverviewExample implements OnInit {
  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: "250px",
      data: { name: this.name, animal: this.animal }
    });
    let dialogDOME = <HTMLElement>(
        document.getElementsByClassName("mat-dialog-container")[0]
      );
    console.log(      " width: ",      dialogDOME.offsetWidth , " height: ",      dialogDOME.offsetHeight   );

    dialogRef.afterClosed().subscribe(result => {
      console.log("The dialog was closed");
      this.animal = result;
    });
  }

  @HostListener("window:resize", ["$event"])
  onResize(event: any) {
    if (document.getElementsByClassName("mat-dialog-container")) {
      let dialogDOME = <HTMLElement>(        document.getElementsByClassName("mat-dialog-container")[0]      );
      console.log(      " width: ",      dialogDOME.offsetWidth , " height: ",      dialogDOME.offsetHeight   );
    }
  }
  ngOnInit() {
  }

}

@Component({
  selector: "dialog-overview-example-dialog",
  templateUrl: "dialog-overview-example-dialog.html"
})
export class DialogOverviewExampleDialog {
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

завершено рабочий стекблиц