在 Angular 9 对话框中，材料在左端呈现为空白答案

【问题标题】：In angular 9 dialog material is render as blank in left end在 Angular 9 对话框中，材料在左端呈现为空白
【发布时间】：2020-07-31 16:14:44
【问题描述】：

我需要有关在屏幕上渲染 mat 对话框的帮助。添加我在下面执行此操作所遵循的步骤。

项目中安装的包是

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      6.4.7
@angular/flex-layout              9.0.0-beta.29-7a22fba
@angular/material                 6.4.7
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

下一个创建的登录组件

html文件

<mat-toolbar color="primary">
        Login 
      <span class="flex-spacer"></span>
      <button mat-button mat-dialog-close>&times;</button>
    </mat-toolbar>

Ts 文件

import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<LoginComponent>) { }

  ngOnInit(): void {
  }

}

然后我已经包含在标题组件中

html代码

<a mat-button (click)="openLoginForm()"><span class="fa fa-sign-in fa-lg"></span> Login</a>

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'});
  }

}

在应用模块中调用

....
import { MatDialogModule } from '@angular/material/dialog';
import { LoginComponent } from './login/login.component';
....
@NgModule({
  declarations: [
...
  LoginComponent
  ],
imports: [
...
MatDialogModule,
  ],
 entryComponents: [LoginComponent],
  providers: [],
  bootstrap: [AppComponent],

})

单击时对话框在左角显示为空

下面还有控制台错误

ERROR TypeError: Cannot read property 'hasAttached' of undefined
    at MatDialogContainer.attachComponentPortal (dialog.js:170)
    at MatDialog._attachDialogContent (dialog.js:708)
    at MatDialog.open (dialog.js:603)
    at HeaderComponent.openLoginForm (header.component.ts:16)
    at HeaderComponent_Template_a_click_16_listener (header.component.html:8)
    at executeListenerWithErrorHandling (core.js:21693)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21742)
    at HTMLAnchorElement.<anonymous> (platform-browser.js:934)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41264)

请有人帮忙解决这个问题。

【问题讨论】：

可以在stackblitz中提供demo吗？
@PrashantPimpale 我试过但没能做到，因为有完整的项目
@Jeyasankar 您有任何解决方法或解决方案吗？从 android v.8 迁移到 v.10 后，我面临同样的问题。
我没有为这个重新创建的项目找到任何解决方案。

标签： angular angular-material modal-dialog angular9

【解决方案1】：

在app.modules.ts的EntryComponents中添加对话框组件

【讨论】：

【解决方案2】：

这可能与 Angular 9+ 和旧版本 Angular 材料（如 6.4.7）的兼容性问题有关。我遇到了同样的问题，这是我的解决方法。

打开 package.json 并将 Angular Material、Angular Animations、Angular CDK 和 flex-layout 的版本更改为最新版本。对我来说，我改为：

"@angular/animations": "^10.1.4",
"@angular/cdk": "^10.2.4",
"@angular/material": "^10.2.2",
"@angular/flex-layout": "^10.0.0-beta.32",

删除节点模块文件夹。
在终端中运行npm install。
确保您将dialogComponent 放入entryComponents。
再试一次，运行ng serve --open。

这对我有用；希望它适用于其他人。

【讨论】：