javascript - 将 Angular MatDialog 居中

Question

我已经使用 angular MatDialog 实现了一个模态对话框来代替 alert() 函数。一切正常，但对话框的定位。我无法设法将对话框放在页面的中央。该对话框始终出现在页面的左下角。

html 文件如下所示:

<h2>Oups! Something went wrong.</h2>

<p>{{error}}</p>

<button class="btn-outline-primary" mat-dialog-close>OK</button>

这是打开对话框的函数

private openDialog(error: string) {
const dialogConfig = new MatDialogConfig();

dialogConfig.data = {
  error: 'This is a test'
}
dialogConfig.disableClose = false;
dialogConfig.hasBackdrop = false;
dialogConfig.autoFocus = false;
dialogConfig.width = '600px';
dialogConfig.height = '200px';

this.dialog.open(ErrorDialogComponent, dialogConfig);
}

和组件类:

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from "@angular/material";

@Component({
  selector: 'app-error-dialog',
  templateUrl: './error-dialog.component.html',
  styleUrls: ['./error-dialog.component.scss']
})
export class ErrorDialogComponent  {
 error: string;

 constructor(@Inject(MAT_DIALOG_DATA) data) {
  this.error = data.error;
 }
}

截图如下:

Answer 1

此代码位于您要打开对话框的任何组件中。您必须引用 MatDialog。 mdRef是对象打开后的实例。

// getConfig returns a matDialogConfig with the data
mc = this.getConfig(data);
// Tell Matdialog which Angular component to use.
mdRef = this.md.open(MessageComponent, mc);

消息组件

import { MAT_DIALOG_DATA } from "@angular/material/dialog";
    import { Component, OnInit, AfterViewInit, Inject } from "@angular/core";
    import { inject } from "@angular/core/testing";

    @Component({
      selector: "lib-message",
      templateUrl: "./message.component.html",
      styleUrls: ["./message.component.css"],
    })
    export class MessageComponent implements OnInit, AfterViewInit {
      constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
        // get the injected dialog data
        this.data = data;
      }

      ngOnInit(): void {}
      ngAfterViewInit() {}
    }

还有CSS

 :host {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: yellow;
        position: absolute;
        top: 10em;
        left: 20em;
        height: 10em;
        width: 20em;
        box-shadow: 0 0 5px rgb(0, 0, 0, 0.27);
    }

总结:消息组件的css覆盖了cdkOverlay的默认设置!