Angular Material:'mat-dialog-content' 不是已知元素 [英] Angular Material: 'mat-dialog-content' is not a known element

问题描述

在将此问题标记为重复"之前，请听我说，因为我被这个问题困了几个小时.我已经浏览了现有的问题，但找不到任何解决方案.

我正在学习 Angular，并且已经开始使用 Angular 9+ 和 Angular Material.我正在尝试通过阅读 官方页面.

我的代码紧跟示例代码，但我不知道为什么我仍然收到此错误消息:

'mat-dialog-content' 不是已知元素.'mat-dialog-actions' 不是已知元素.

对话框确实出现了，但看起来好像在对话框模板 html 中根本没有渲染任何 Angular Material 组件/指令.即使我使用 <button mat-button>Button</button>，它也会呈现为普通按钮而不是 Angular Material 按钮.对话框模板中没有的所有其他内容都可以正常工作.我不知道我在这里做错了什么，但如果有人能指出我的错误，那就太好了！

app.module.ts:(我正在导入MatDialogModule)

<预><代码>...从'@angular/material/dialog' 导入 { MatDialogModule };@NgModule({声明: [...],进口:[...对话框模块],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

mycomponent.ts:

import { Component, OnInit, ViewChild, Inject } from '@angular/core';从@angular/material/dialog"导入 { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogConfig };...@成分({选择器:'app-my'，templateUrl: './my.component.html',styleUrls: ['./my.component.css']})导出类 MyComponent 实现 OnInit {构造函数(公共 dataDialogHandler:MatDialog){}ngOnInit(): 无效 {}公共 openDataDialog(): void {const dialogConfig = new MatDialogConfig();dialogConfig.data = {};this.dataDialogHandler.open(DataDialogComponent, dialogConfig);}}@成分({选择器:'数据对话框'，templateUrl: './data-dialog.html'})导出类 DataDialogComponent {构造函数(@Inject(MAT_DIALOG_DATA)公共数据:DialogData){}}导出接口 DialogData {}

data-dialog.html:

一些标题
<mat-dialog-content><p>对话作品</p></mat-dialog-content><mat-dialog-actions align="end"><button mat-button mat-dialog-close>关闭</button></mat-dialog-actions>

最后，在 my.component.html 中:

<button mat-button (click)="openDataDialog()">查看对话框</button>

我在这里做错了什么?提前致谢！

@angular/core 9.0.7@angular/cdk 9.1.3@角度/材料 9.1.3打字稿 3.7.5

解决方案

请在declarations数组和app.module.ts的entryComponents数组中添加DataDialogComponent

import { MatDialogModule } from '@angular/material/dialog';@NgModule({声明: [DataDialogComponent//我想你错过了这个声明],进口:[...对话框模块],提供者:[]，条目组件:[DataDialogComponent]引导程序:[AppComponent]})导出类 AppModule { }

Before marking this question as "duplicate", kindly hear me out since I'm stuck for hours with this problem. I've gone through the existing questions but could not find any solution.

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.

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: (I'm importing the 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>

and finally, in 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

解决方案

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' 不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！