Angular Material：'mat-dialog-content' 不是已知元素

Question

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

我正在学习 Angular，并且已经开始使用 Angular 9+ 和 Angular Material。我试图通过阅读官方页面的文档来实现一个简单的 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

Answer 1

请加DataDialogComponent声明数组中，并在app.module.ts的entryComponents阵列

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 { }

Answer 2

将mat-dialog-content和更改mat-dialog-actions为属性。IE：

<div mat-dialog-content>
    <p>dialog works</p>
</div>
<div mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Close</button>
</div>

Answer 3

您缺少entryComponents声明。

还添加 DialogData 接口

export interface DialogData {
 example: string;
}

直播：https ://stackblitz.com/edit/angular-q4mwkt

MatDialog - 中等帖子