Question

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

我正在学习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

Answer 1

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

Answer 2

将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>

Answer 3

我遇到了同样的问题，并通过将对话框组件和容器组件移到了不同的文件中来解决了这个问题。现在，您已经完成了以下设置，其中对话框和容器组件都在同一文件中声明：

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

Answer 4

我的问题终于找到了解决方案！

需要在这里回答，因为我认为这是同一件事。它肯定会帮助很多人！

因此，有两个问题：首先是您没有导出“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],

经过这些更改后，它运行良好。

Answer 5

似乎当前的 Material 文档：

<h2 mat-dialog-title>Delete all elements?</h2>

这将删除当前在此页面上且无法撤消的所有元素。取消

Answer 6

您缺少entryComponents声明。

还为DialogData添加界面

export interface DialogData {
 example: string;
}

实时：https://stackblitz.com/edit/angular-q4mwkt

MatDialog - Medium Post

角材料：“ mat-dialog-content”不是已知元素

6 个答案:

将组件拆分为单独的文件