如何在关闭前检查子组件是否有未保存的数据

Question

在我的应用程序中，以前的开发人员使用 Infragistics OverlayService 以模态模式显示某些组件，工作正常但随着时间的推移，在使用其他 3 方控件时，我发现许多问题，如 zIndex 等和一些其他奇怪的行为。所以我想在不破坏一切的情况下尝试用 Angular 对话框替换 OverlayService。在这样做的过程中，我遇到了如果用户单击右上角的 x 如何关闭对话框的问题。通常这不是问题，因为我可以调用

this.dialogRef.close()

但这里不是这种情况，因为 X 在不同的组件中。当用户打开我使用的对话框时

const dialogRef = this.dialog.open(CreateQuickMailComponent,
     {
       disableClose: true, position: {
        top: '0px',
        right: '0px'
       },
        panelClass: 'inner-no-pad-dialog',
        autoFocus: false
      })

那么该组件的模板代码如下所示

<app-header-container title="New Mail">
    <div class="sample-column card-wrapper">
        <app-quick-mail-form (edit)="edit($event)"></app-quick-mail-form>
    </div>
</app-header-container>

app-quick-mail-form 是具有所有逻辑的表单，从那里我可以使用 this.dialogRef.close() 关闭对话框。我需要的是一种从 app-header-container 执行相同操作的方法，它在点击时右上角有 X。

我的 app-header-container 模板

<div class="container__element">
    <igx-navbar title="{{ title }}">
        <igx-icon (click)="dismiss()">close</igx-icon>
    </igx-navbar>

    <ng-content></ng-content>
</div>

所以我可以通过使用 this.dialogRef.close() 并引用 private dialogRef: MatDialogRef 来关闭对话框，但是如何才能我在调用 close() 之前检查底层表单是否脏了，以询问用户在关闭之前是否想要安全？由于此组件被多个组件使用，因此我无法对引用进行硬编码。

所以我愿意接受任何想法或建议

Answer 1

您可以将 @Input 添加到 <app-header-container> 组件，以指示是否允许关闭。

使用它的每个组件都可以传入任何有意义的标准：

<app-header-container title="New Mail" [allowDismiss]="!mailForm.isDirty">
    <div class="sample-column card-wrapper">
        <app-quick-mail-form #mailForm (edit)="edit($event)"></app-quick-mail-form>
    </div>
</app-header-container>

@Input() allowDismiss = true;

public dismiss() {
  if(!this.allowDismiss) {
    return;
  }

  this.dialogRef.close();
}

如何在关闭前检查子组件是否有未保存的数据

How to check if child component has unsaved data before closing

angular-material

angular