表单更改后确认角模态关闭

编程问答 2022-05-28

问题描述

我有一个创建/更新组件，我需要在没有确认模式的情况下关闭它，以防通过单击关闭按钮或从浏览器单击后退按钮没有更改。如果修改关闭按钮变为取消按钮并单击它或单击浏览器中的后退按钮，我需要打开确认模式。如果我从模态单击是按钮，则创建/更新模态应关闭，如果否，模态应保持打开状态。

我制作了一个 canDeactivate Guard：

public Boolean compareDateWithoutTime(Date d1,Date d2) {
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
    return sdf.format(d1).equals(sdf.format(d2));
}

在组件中，我创建了 canDeactivate 方法来处理来自浏览器点击的后退按钮：

export class DeactivateGuard implements CanDeactivate<CreateUpdateEquipmentComponent> {
  canDeactivate(component: CreateUpdateEquipmentComponent) {
    return component.canDeactivate();
  }
}

我还创建了确认模式：

  @HostListener('window:beforeunload',['$event']) unloadHandler(event: Event) {
    event.returnValue = false;
  }

  canDeactivate() {
    if (this.equipmentForm.dirty) {
      this.confirmCloseModalopen();
    } else {
      this.router.navigate(['equipment']);
      this.equipmentActions.requestEquipment();
      this.modalReference.close();
      this.resetonClose();
      return true;
    }
  }

我通过调用 ngOnChanges(changes: any): void { if (changes.isOpen && this.isOpen) { this.modalReference = this.modalService.open(this.confirmCloseModal,{ size: 'small',variant: 'overlay' }); this.modalReference.onClose$.pipe(takeuntil(this.destroy)).subscribe((shouldCloseModal: boolean) => { this.confirmCloseCreateUpdateModal.emit(shouldCloseModal); this.destroy.next(); }); this.modalReference.ondismiss$.pipe(takeuntil(this.destroy)).subscribe(() => { this.confirmCloseCreateUpdateModal.emit(false); this.destroy.next(); }); } }

从创建/更新打开确认模式

this.confirmCloseModalopen(); 只是集合 this.confirmCloseModalopen();

正如我所说，我有 2 个按钮，取消（如果有更改则出现）和关闭（如果没有更改则出现），在取消按钮上单击确认模式打开，但在关闭时创建更新模式应该关闭。

我完全不知道如何处理这种情况。我尝试了更多的解决方案，但没有结果。

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularback-buttonconfirmationngrxtypescripttypescript