我正在使用 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>
我的实现有什么问题?如果我没有给对话框提供宽度和高度,那么当我调整窗口大小时它会调整得很好。
最佳答案
为了实现响应式,我们可以在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);
关于 Angular Material 对话框没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51299416/