问题描述
在将此问题标记为重复"之前,请听我说,因为我被这个问题困了几个小时.我已经浏览了现有的问题,但找不到任何解决方案.
我正在学习 Angular,并且已经开始使用 Angular 9+ 和 Angular Material.我正在尝试通过阅读 官方页面.
I'm learning Angular and have started with Angular 9+ and Angular Material. I'm trying to implement a simple dialog of Angular Material by reading the documentation from the official page.
我的代码紧跟示例代码,但我不知道为什么我仍然收到此错误消息:
My code closely follows the example code but I'm at a loss on why I'm still getting this error messages:
'mat-dialog-content' is not a known element.
'mat-dialog-actions' is not a known element.
对话框确实出现了,但看起来好像在对话框模板 html 中根本没有渲染任何 Angular Material 组件/指令.即使我使用 <button mat-button>Button</button>
,它也会呈现为普通按钮而不是 Angular Material 按钮.对话框模板中没有的所有其他内容都可以正常工作.我不知道我在这里做错了什么,但如果有人能指出我的错误,那就太好了!
The dialog does show up but it looks as if no Angular Material components / directives are being rendered at all in the dialog template html. Even if I use <button mat-button>Button</button>
, it would be rendered as a normal button and not an Angular Material button. Everything else which is not in the dialog template works perfectly fine. I have no idea what I'm doing wrong here, but if anyone could point me out my mistake, that'd be great!
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>
我在这里做错了什么?提前致谢!
What am I doing wrong here? Thanks in advance!
@angular/core 9.0.7
@angular/cdk 9.1.3
@angular/material 9.1.3
typescript 3.7.5
推荐答案
请在declarations数组和app.module.ts的entryComponents数组中添加DataDialogComponent
Please add DataDialogComponent in the declarations array, and in entryComponents array of app.module.ts
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
declarations: [
DataDialogComponent //I think you have missed this declaration
],
imports: [
...
MatDialogModule
],
providers: [],
entryComponents: [DataDialogComponent]
bootstrap: [AppComponent]
})
export class AppModule { }
这篇关于Angular Material:'mat-dialog-content' 不是已知元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!