无法正确显示 Angular 对话框

Question

我正在尝试在 Angular 中创建一个对话框，但该对话框未显示在中心，仅显示为左侧的垂直白色矩形。 我将附上一张描述确切问题的图片：screenshot of the page。

1. 我的appmodule.ts文件中包含了入口组件
2. 编译时没有错误。

标题component.ts文件：

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
import { LoginComponent } from '../login/login.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})

export class HeaderComponent implements OnInit {

  constructor(public dialog: MatDialog ) { }

  ngOnInit() {
  }

 openLoginForm() {
    this.dialog.open(LoginComponent, {width: '500px', height: '450px'});
  }
}

Answer 1

在entrycomponents数组中添加LoginComponentmodule。

像这样。

entryComponents: [LoginComponent]