在将此问题标记为“重复”之前,请听我说,因为我在这个问题上呆了几个小时。我已经解决了现有的问题,但找不到任何解决方案。
我正在学习Angular,并从Angular 9+和Angular材质开始。我正在尝试通过从official page中阅读文档来实现一个简单的Angular Material对话框。
我的代码紧跟示例代码,但我仍然茫然为什么仍然收到此错误消息:
'mat-dialog-content' is not a known element. 'mat-dialog-actions' is not a known element.
对话框确实出现,但看起来对话框模板html中根本没有渲染Angular Material组件/指令。即使使用
<button mat-button>Button</button>
,它也会被渲染为普通按钮而不是“角度材质”按钮。对话框模板中没有的所有其他内容都可以正常工作。我不知道我在做什么错,但是如果有人可以指出我的错误,那太好了!
app.module.ts
:(我正在导入MatDialogModule
)
... import { MatDialogModule } from '@angular/material/dialog'; @NgModule({ declarations: [ ... ], imports: [ ... MatDialogModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
mycomponent.ts
:
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; import { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog'; ... @Component({ selector: 'app-my', templateUrl: './my.component.html', styleUrls: ['./my.component.css'] }) export class MyComponent implements OnInit { constructor(public dataDialogHandler: MatDialog) {} ngOnInit(): void {} public openDataDialog(): void { const dialogConfig = new MatDialogConfig(); dialogConfig.data = {}; this.dataDialogHandler.open(DataDialogComponent, dialogConfig); } } @Component({ selector: 'data-dialog', templateUrl: './data-dialog.html' }) export class DataDialogComponent { constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {} } export interface DialogData {}
data-dialog.html
:
<h2 mat-dialog-title>some title</h2> <mat-dialog-content> <p>dialog works</p> </mat-dialog-content> <mat-dialog-actions align="end"> <button mat-button mat-dialog-close>Close</button> </mat-dialog-actions>
最后,在
my.component.html
中:
<button mat-button (click)="openDataDialog()">View Dialog</button>
我在这里做错了什么?预先感谢!
@angular/core 9.0.7
@angular/cdk 9.1.3
@angular/material 9.1.3
typescript 3.7.5
在将此问题标记为“重复”之前,请听我说,因为我在这个问题上呆了几个小时。我已经解决了现有的问题,但是找不到任何解决方案。我正在学习...
请在app.module.ts的声明数组中添加MyComponent
您缺少entryComponents
声明。