Angular 14 -从Angular material对话框中获取数据

Question

我希望从使用ng-template的材料对话框中获得数据。我得到一个属性'数据'不存在类型'MeetingsComponent'。当尝试使用这行

<button mat-raised-button [mat-dialog-close]="data" cdkFocusInitial>Save</button>

这是我的模板的完整代码:

<ng-template #editMeeting>
<mat-dialog-content>
<mat-form-field appearance="outline">
<mat-label>Meeting Name</mat-label>
<input #name matInput type="text" autocomplete="off"/>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Meeting Location</mat-label>
<input #location matInput type="text" autocomplete="off"/>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Choose a date</mat-label>
<input #date matInput [matDatepicker]="picker">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-dialog-content>
<div mat-dialog-actions>
<button mat-raised-button mat-dialog-close>Close</button>
<button mat-raised-button [mat-dialog-close]="data" cdkFocusInitial>Save</button>
</div>
</ng-template>

这一行用来打开对话:

<button mat-raised-button type="button" (click)="edit(editMeeting, row)">Edit</button>

下面是被调用的编辑函数:

edit(content: any, row: any): void {
this.matDialog.open(content, {
data: {name: row.name}
})
console.log(row)
}

我知道这不是渲染对话框内容的最佳方式，但现在只是为了速度，这就是我这样做的方式。如果我遗漏了任何需要的代码，请告诉我。

Answer 1

在你的dialog组件中，你需要在组件的结构中声明从父组件接收的数据对象。

constructor(@Inject(MAT_DIALOG_DATA) public data: any) { ...}

完整示例:Stackblitz