Angular Материал: 'mat-dialog-content' не является известным элементом

Question

Прежде чем пометить этот вопрос как "дубликат", пожалуйста, выслушайте меня, потому что я застрял на несколько часов с этой проблемой. Я прошел через существующие вопросы, но не смог найти никакого решения.

Я изучаю Angular и начал с Angular 9+ и Angular Материал. Я пытаюсь реализовать простой диалог Angular Material, читая документацию с официальной страницы .

Мой код точно соответствует примеру кода, но я в растерянности почему я все еще получаю эти сообщения об ошибках:

'mat-dialog-content' is not a known element.
'mat-dialog-actions' is not a known element.

Диалог действительно появляется, но выглядит так, как будто Angular Компоненты / директивы материалов вообще не отображаются в шаблоне диалога html. Даже если я использую <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 в массиве объявлений и в массиве entryComponents 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 { }

Answer 2

Вам не хватает декларации entryComponents.

Также добавьте интерфейс для DialogData

export interface DialogData {
 example: string;
}

Live: https://stackblitz.com/edit/angular-q4mwkt

MatDialog - Средняя почта