Изначально я попробовал то, что предложил Эдрик, и диалоговое окно открылось идеально, но я немного растерялся, когда захотел закрыть его из компонента после некоторой обработки, а не только с помощью директивы шаблона matDialogClose
.Поэтому я провел поиск по этой теме, и мне потребовалось некоторое время, чтобы объединить все части и выяснить, что ссылка на шаблон - это нечто иное, чем ссылка на диалог этого фрагмента шаблона.Итак, приступим к работе, собрав все воедино ...
<!-- Edit Company -->
<ng-template #editCompanyModal>
<div class="mat-dialog-header border-bottom">
<h2 mat-dialog-title class="mb-0">Edit Company</h2>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
<button mat-icon-button matDialogClose tabindex="-1">
<mat-icon aria-label="Close dialog">close</mat-icon>
</button>
</div>
</div>
<form #editCompanyForm="ngForm" role="form" novalidate name="editCompanyForm"
(ngSubmit)="editCompanyFormSubmit(editCompanyForm)">
<mat-dialog-content>
<fieldset>
...
</fieldset>
</mat-dialog-content>
<mat-dialog-actions class="border-top">
<button type="button" mat-button matDialogClose>Cancel</button>
<button type="submit" mat-raised-button color="accent"
[disabled]="!editCompanyForm.valid">Save changes</button>
</mat-dialog-actions>
</form>
</ng-template>
@Component({
...
})
export class AccountCompanyComponent {
@ViewChild('editCompanyModal') editCompanyModal: TemplateRef<any>;
private editCompanyDialogRef: MatDialogRef<TemplateRef<any>>;
constructor(public dialog: MatDialog) {}
// Dialog handling
openCompanyDetailsDialog(): void {
const dialogConfig = new MatDialogConfig();
dialogConfig.restoreFocus = false;
dialogConfig.autoFocus = false;
dialogConfig.role = 'dialog';
this.editCompanyDialogRef = this.dialog.open(this.editCompanyModal, dialogConfig);
this.editCompanyDialogRef.afterClosed().subscribe(result => {
consoleOut('The dialog was closed...');
});
}
closeCompanyDetailsDialog() {
this.editCompanyDialogRef.close();
}
editCompanyFormSubmit(form: NgForm) {
if (!form.valid) {
return false;
}
// Save company data
}