本文介绍了在 angular 9 对话框材料在左端呈现为空白的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要关于在屏幕上渲染 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>×</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 对话框材料在左端呈现为空白的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!