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

问题描述

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

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

推荐答案

请在声明数组和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 { }

这篇关于角材料:"mat-dialog-content"不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！