关键词：
【中文标题】Angular Material：“mat-dialog-content”不是已知元素【英文标题】：Angular Material: 'mat-dialog-content' is not a known element 【发布时间】：2020-07-02 12:14:11 【问题描述】：在将此问题标记为“重复”之前，请听我说完，因为我被这个问题困扰了好几个小时。我已经解决了现有的问题，但找不到任何解决方案。
我正在学习 Angular，并开始使用 Angular 9+ 和 Angular Material。我正在尝试通过阅读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>，它也会呈现为普通按钮而不是 Angular Material 按钮。不在对话框模板中的其他所有内容都可以正常工作。我不知道我在这里做错了什么，但如果有人能指出我的错误，那就太好了！
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
【问题讨论】：
【参考方案1】：您缺少entryComponents 声明。
同时为DialogData添加接口
export interface DialogData
example: string;
直播：https://stackblitz.com/edit/angular-q4mwkt
MatDialog - Medium Post
【讨论】：
我试过这个，将DataDialogComponents 添加到entryComponents。但这仍然不能解决问题。
使用您共享的确切代码对我来说效果很好 - stackblitz.com/edit/angular-q4mwkt
确保您在 package.json 中有兼容版本的 core、common、compiler、cdk、material 和 animations
也进行拼写检查。我看到您在 cmets 中提到了 DataDialogComponents，而在问题中它是单数形式的 DataDialogComponent。
我认为你的问题是 mat-dialog 没有出现。如果要使用它们，则必须导入每个材料模块。现在我也通过导入 mat-button 模块更新了 stackblitz。【参考方案2】：
请在声明数组和app.module.ts的entryComponents数组中添加DataDialogComponent
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
【讨论】：
MyComponent 已与 AppComponent 一起添加到声明中。但这并不能解决问题。
DataDialogComponent 怎么样？是否也添加到声明数组中？
@SajibAcharya，如果这对您有帮助，请接受答案。【参考方案3】：
将mat-dialog-content 和mat-dialog-actions 更改为属性。
即：
<div mat-dialog-content>
<p>dialog works</p>
</div>
<div mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Close</button>
</div>
【讨论】：
这解决了我使用 Angular 11 的问题 我正在从 angular & material 7 迁移到 11 。 Ng update 应该注意这一点，但没有。我必须手动进行更改。 弄清楚这一点非常令人沮丧。非常感谢。【参考方案4】：我遇到了同样的问题，并通过将对话框组件和容器组件移动到不同的文件中来解决它。目前，您已经完成了这样的设置，其中对话框和容器组件都在同一个文件中声明：
# my.component.ts
@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
将组件拆分为单独的文件
我建议创建一个全新的对话框组件来处理它自己的依赖项，以便您最终得到这样的结果：
# my.component.ts
import Component from '@angular/core';
import MatDialog from '@angular/material/dialog';
# Make sure you import your newly created component
import MyDataDialog from 'src/app/wherever-youve-put-it/my-data-dialog.component';
@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(MyDataDialogComponent, dialogConfig);
然后使用ng generate component my-data-dialog 创建一个新组件作为您的对话框。然后，您可以跨依赖项和代码复制到（如果您使用 CLI 生成并复制而不是复制到新的手工组件中，您将不太可能得到引用等错误）
# my-data-dialog.component.ts
import Component, OnInit, Inject from '@angular/core';
import MAT_DIALOG_DATA from '@angular/material/dialog';
@Component(
selector: 'data-dialog',
templateUrl: './data-dialog.html'
)
export class DataDialogComponent
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData)
export interface DialogData
【讨论】：
所以我尝试了几种方法。我发现它 100% 工作的方法是在 1app.module` 的声明中添加对话框组件，并将MatDialogModule 和（可选）MatButtonModule 导入到 app.module 的导入中。奇怪的是这出于某种原因。【参考方案5】：
终于找到了解决问题的办法！
需要在这里回答，因为我认为这是同一件事。它肯定会帮助很多人！
所以，有两个问题：首先是您没有导出“MyComponent”。
@NgModule(
declarations: [
...
],
imports: [
...
MatDialogModule
],
providers: [],
bootstrap: [AppComponent]
exports: [ AppComponent, #add this code
MyComponent ],
)
似乎 Angular 无法将您的导入绑定到未导出的类中。那么这解决了HTML文件中的问题。 现在是第二个：为了测试，在“module.ts”中添加组件后，您还需要在“spec.ts”中添加 MatDialogModule：
beforeEach(async() =>
await TestBed.configureTestingModule(
imports: [ CommonModule,
...,
MatDialogModule],
在这些更改之后，它运行良好。
【讨论】：
【参考方案6】：似乎当前的 Material 文档：
<h2 mat-dialog-title>Delete all elements?</h2>
这将删除当前在此页面上且无法撤消的所有元素。 取消
和here
不适用于 Angular 12。Danilo Mz 的上述解决方案对我有用。
即：“ 将 mat-dialog-content 和 mat-dialog-actions 更改为属性"
【讨论】：
AngularCLI 和 Angular Material（原理图）错误：无法解析集合“@angular/material”
】AngularCLI和AngularMaterial（原理图）错误：无法解析集合“@angular/material”【英文标题】：AngularCLIandAngularMaterial(schematics)error:Collection"@angular/material"cannotberesolved【发布时间】：2018-12-0221:02:48【问题描述】：我正在尝试使用t... 查看详情
无法导入“@angular/material”模块
】无法导入“@angular/material”模块【英文标题】：Notabletoimport"@angular/material"module【发布时间】：2020-05-2506:34:40【问题描述】：我对堆栈完全陌生，我在使用Angular的材料模块时遇到了一些问题。我正在尝试在我的代码中导... 查看详情
Angular2 Material：Angular 材质输入的自定义验证
】Angular2Material：Angular材质输入的自定义验证【英文标题】：Angular2Material:CustomValidationforAngularMaterialInput【发布时间】：2018-03-2315:21:31【问题描述】：在我的Angular2和材料应用程序中，我想检查用户名是否已经被占用。如果它已经... 查看详情
Angular 2 Material - 如何居中进度微调器
】Angular2Material-如何居中进度微调器【英文标题】：Angular2Material-HowToCenterProgressSpinner【发布时间】：2017-05-1406:34:32【问题描述】：我已经从下面的链接实现了Angular2进度微调器https://github.com/angular/material2/tree/master/src/lib/progress-spin... 查看详情
Angular Material - 不关闭 Material 小吃吧
】AngularMaterial-不关闭Material小吃吧【英文标题】：AngularMaterial-NotclosingMaterialsnackbar【发布时间】：2018-09-1223:27:40【问题描述】：我正在使用Angular和AngularMaterial版本5。有没有办法让小吃店保持打开状态？例如，如果发生错误，请... 查看详情
带有 Angular Material 声明的 Angular 编译警告
】带有AngularMaterial声明的Angular编译警告【英文标题】：AngularCompilationWarningswithAngularMaterialDeclarations【发布时间】：2019-10-1809:45:44【问题描述】：我在安装AngularMaterial后尝试编译时遇到了一堆警告（无论是直接来自npm还是通过ngadd... 查看详情
如何有效地使用 Angular Material 自定义调色板颜色 Angular Material
】如何有效地使用AngularMaterial自定义调色板颜色AngularMaterial【英文标题】：HowtouseAngularMaterialcustom-palettecolorseffectivelyAngularMaterial【发布时间】：2019-04-0423:20:01【问题描述】：我正在使用自定义材质调色板。使用其默认阴影、深色... 查看详情
@angular/material/index.d.ts' 不是模块
】@angular/material/index.d.ts\\\'不是模块【英文标题】：@angular/material/index.d.ts\'isnotamodule@angular/material/index.d.ts\'不是模块【发布时间】：2020-02-2322:03:14【问题描述】：使用Angular8，在构建应用程序时，我们遇到以下错误：app/modules/admin... 查看详情
Angular Material Schematics 生成的代码
】AngularMaterialSchematics生成的代码【英文标题】：AngularMaterialSchematicsgeneratedcode【发布时间】：2018-10-2309:54:27【问题描述】：我是Angular的新手，找不到任何东西来解释从nggenerate@angular/material:material-nav生成的这些代码行的确切含义... 查看详情
@angular/material 自动完成的性能问题
】@angular/material自动完成的性能问题【英文标题】：Performanceissuewith@angular/materialautocomplete【发布时间】：2019-10-1416:10:05【问题描述】：我正在使用Angular/Material自动完成功能。在将数据加载到自动完成时遇到严重的性能问题，例... 查看详情
找不到模块'@angular/material-moment-adapter'
】找不到模块\\\'@angular/material-moment-adapter\\\'【英文标题】：Cannotfindmodule\'@angular/material-moment-adapter\'找不到模块\'@angular/material-moment-adapter\'【发布时间】：2018-05-2817:13:55【问题描述】：为什么这不起作用？我尝试导入MomentDateAdapte... 查看详情
波纹效果未显示在角度应用程序的按钮中 - Angular-Material
】波纹效果未显示在角度应用程序的按钮中-Angular-Material【英文标题】：Rippleeffectisnotdisplayinginbuttoninangularapp-Angular-Material【发布时间】：2019-05-1117:32:35【问题描述】：https://material.angular.io/components/button/overview我正在使用这个angula... 查看详情
Angular 2 Material无法加载样式
】Angular2Material无法加载样式【英文标题】：Angular2Materialcan\'tloadstyle【发布时间】：2017-10-0411:06:26【问题描述】：我开始在Angular中使用AngularMaterial库为界面开发一个Web应用程序。但是在尝试导入预建主题时出现错误。为了导入它... 查看详情
Angular Material/Jasmine 测试 - 加载 Material Harnesses 时出错
】AngularMaterial/Jasmine测试-加载MaterialHarnesses时出错【英文标题】：AngularMaterial/Jasminetesting-errorswhileloadingMaterialHarnesses【发布时间】：2020-11-2321:37:52【问题描述】：我正在尝试测试使用AngularMaterial构建的组件，但是在使用HarnessLoader... 查看详情
angular-material2 工具栏阴影
】angular-material2工具栏阴影【英文标题】：angular-material2toolbarshadow【发布时间】：2017-07-1322:07:27【问题描述】：我是material2的新手我试图将主应用程序工具栏固定在屏幕顶部，问题是海拔无法正常工作（内容隐藏了工具栏的阴影... 查看详情