angular - 'mat-dialog-actions' 不是 Angular Material 中的已知元素

Question

我知道这个问题是重复的(this)。但我有问题。我在 AppModule 的导入部分添加了 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

就像这里的例子: 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) {}
}

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

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