在 angular 9 对话框材料在左端呈现为空白 [英] In angular 9 dialog material is render as blank in left end

问题描述

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

I need a help on mat dialog render on screen. adding the steps which i followed to perform this action below.

项目中安装的包是

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],

})

点击时左下角的对话框为空

The dialog comes as empty at the left corner while clicking

还有控制台错误如下

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)

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

Please some one help on this issue.

推荐答案

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

Add dialog component in the EntryComponents in the app.modules.ts

这篇关于在 angular 9 对话框材料在左端呈现为空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！