Question

我正在使用Angular material dialog，下面是我为打开对话框而编写的代码，其中我正在传递配置：

component.ts

let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config
};

const dialogRef = this.dialog.open(
  DialogBoxComponent,
  dialogBoxSettings
);

我已经将宽度和高度传递给了对话框，但是当我调整浏览器窗口的大小时，对话框将移至窗口的左侧。

dialog-box.component.ts：

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

declare let jQuery: any;
@Component({
  selector: "dialog-box",
  templateUrl: "./dialog-box.component.html",
  styleUrls: ["./dialog-box.component.css"]
})
export class DialogBoxWidgetComponent implements OnInit {
  title: string = "Title";
  heading: string = "Heading";
  type: string = "userInput;";
  buttons: any;

  public dialogConfig: any;

  subscription: Subscription;

  constructor(
    public dialogRef: MatDialogRef<DialogBoxWidgetComponent>,
    @Inject(MAT_DIALOG_DATA) private data: any
  ) {}

  closeDialog() {
    jQuery(".close").trigger("click");
  }



  ngOnInit() {
    this.dialogConfig = this.data;
    this.title = this.dialogConfig.title;
    this.heading = this.dialogConfig.heading;
    this.type = this.dialogConfig.type;
    this.buttons = this.dialogConfig.buttons;
    jQuery(".cdk-overlay-container").css("z-index", 99999);
    jQuery(".mat-dialog-container").css({
      "border-radius": "7px"
    });
  }
}

dialog-box.component.html

<h1 matDialogTitle>{{title}}</h1>

<div (click)="closeDialog()" style="position: relative;">
    <button class="close" mat-dialog-close></button>
  </div>

<div mat-dialog-content>{{heading}}</div>
<div mat-dialog-actions *ngIf="type == 'userInput'">
      <button *ngFor="let item of buttons" [ngClass]="item.type=='button'?'mat-dialog-btn':'mat-dilalog-btn-link'" mat-button matDialogClose="{{item.value}}">{{item.name}}</button>
</div>

我的实现有什么问题？如果我不给对话框指定宽度和高度，则在调整窗口大小时可以进行调整。

Answer 1

您可以尝试在对话框设置中添加margin: 0 auto;：

let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  margin: '0 auto',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config
};

Answer 2

要获得响应性，我们可以在MatDialogconfig中使用panelClass

以全局样式添加以下内容

.dialog-responsive {
    width: 40%;
}

@media only screen and (max-width: 760px) {
    .dialog-responsive {
        width: 100%;
    }
}

并将此类包含在您要打开对话框的配置中

   let config: MatDialogConfig = {
      panelClass: "dialog-responsive"
    }
    let dialogRef = this.dialog.open(InviteStudentComponent, config);

角材料对话框无响应

2 个答案: