Question

我知道这个问题是重复的（this）。但是我有问题我在AppModule的import部分中添加了MatDialogModule。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatDialogModule,
    MatButtonModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

对话框内容：

<h2 mat-dialog-title>Install Angular</h2>
<mat-dialog-content class="mat-typography">
    <h3>Develop across all platforms</h3>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
</mat-dialog-actions>

当我想打开对话框时：

  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(CourseAcitonComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

我收到以下错误消息：

1-

If 'mat-dialog-content' is an Angular component, then verify that it is part of this module.

2-

Can't bind to 'mat-dialog-close' since it isn't a known property of 'button'.
<button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>

Answer 1

mat-dialog-content是指令，而不是组件，因此应将其用作指令：

<div mat-dialog-content>
   Mycontent
</div>

Angular在对话框元素内生成动态内容。因此，我们必须在module.ts文件中@NgModule的声明和entryComponents处添加对话框类。我的app.module.ts

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
   MatDialogModule
  ],
  entryComponents: [
    MatDialogModule
  ],
})

我希望您现在也可以解决您的问题。

Answer 2

就像这里的例子： https://material.angular.io/components/dialog/overview#dialog-data

@Component({
  selector: 'dialog-data-example-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

您需要在DialogDataExampleDialog中导入并添加app.module.ts

declarations: [
  AppComponent,
  // ...
  DialogDataExampleDialog // Import and add this line
],

“垫子对话动作”不是角材料中的已知元素

2 个答案: