“mat-dialog-actions”不是角材料中的已知元素答案

【问题标题】：'mat-dialog-actions' is not a known element in angular material“mat-dialog-actions”不是角材料中的已知元素
【发布时间】：2020-11-15 01:47:09
【问题描述】：

我知道这个问题是重复的 (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}`);
    });
  }

我收到以下错误：

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

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>

【问题讨论】：

无论您从哪里调用 openDialog 方法，它是否在 appModule 上下文中？
@alou - 谢谢。是的。它在 appModule 上下文中

标签： angular angular-material

【解决方案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
],

【讨论】：

【解决方案2】：

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
  ],
})

希望你现在也能解决你的问题。

【讨论】：