Angular 6和Material是否可以在对话框中显示，而不是整个零部件，而只是其中的一部分

Question

我有一个组件和一个表视图。同一个组件有一个用于添加新记录的表单。我想在对话框中显示此表单，但不要将其放在单独的组件中。有可能吗？

Answer 1

如果我正确理解这个问题，这是可能的。在组件HTML中使用ng模板，其中包含要在对话框中显示的内容。

<ng-template #dialogTemplate>
<h1 mat-dialog-title>Title</h1>
<mat-dialog-content>
Formgroup for adding item goes here
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button [matDialogClose]='true' mat-icon-button><mat-icon>check</mat-icon></button>
<button mat-button [matDialogClose]='false' mat-icon-button><mat-icon>cancel</mat-icon></button>
</mat-dialog-actions>
</ng-template>

然后，在ts文件中创建一个ViewChild

@ViewChild('dialogTemplate') dialogTemplate: TemplateRef<any>;
constructor(private dialog: MatDialog) { }

然后，您可以通过从按钮等调用功能来打开对话框。

open() {
const dialogRef = this.dialog.open(this.dialogTemplate);
dialogRef.afterClosed().subscribe(answer => {
if (answer === true) {
// logic to save your item goes here
}
});
}