如何在另一模块点击dispensed按钮时停止stopDrugOrder事件监听器

实现思路 #

利用Angular全局服务共享状态，标记Dispensed按钮的点击状态，在停药方法中校验该状态，决定是否执行后续逻辑。

• 步骤1：创建状态管理服务
  实现一个全局服务来跟踪Dispensed按钮的点击状态：

  import { Injectable } from '@angular/core';
  
  @Injectable({ providedIn: 'root' })
  export class DrugStatusService {
    isDispensedClicked = false;
  
    markDispensed() {
      this.isDispensedClicked = true;
    }
  
    resetDispensedStatus() {
      this.isDispensedClicked = false;
    }
  }
  

• 步骤2：在Dispensed按钮模块更新状态
  在Dispensed按钮的点击事件处理中，调用服务标记状态：

  import { DrugStatusService } from '../path/to/drug-status.service';
  
  constructor(private drugStatusService: DrugStatusService) {}
  
  onDispensedClick() {
    // 原有Dispensed业务逻辑
    // ...
    
    this.drugStatusService.markDispensed();
  }
  

• 步骤3：修改停药方法添加状态校验
  在stopDrugOrder方法中，先检查状态，若Dispensed已点击则终止流程：

  import { DrugStatusService } from '../path/to/drug-status.service';
  
  constructor(
    private dialog: MatDialog,
    private encounterService: EncounterService,
    private drugStatusService: DrugStatusService
  ) {}
  
  stopDrugOrder(e: Event, drugOrder: any, drugName: string) {
    // 校验状态，阻止后续逻辑
    if (this.drugStatusService.isDispensedClicked) {
      e.stopPropagation();
      return;
    }
  
    const confirmDialog = this.dialog.open(SharedConfirmationComponent, {
      width: "25%",
      data: {
        modalTitle: `Stop Medication`,
        modalMessage: `You are about to stop ${drugName} for this patient, Click confirm to finish!`,
        showRemarksInput: true,
      },
      disableClose: false,
      panelClass: "custom-dialog-container",
    });
  
    confirmDialog.afterClosed().subscribe((confirmationObject) => {
      if (confirmationObject?.confirmed) {
        // 再次校验，避免对话框打开期间点击Dispensed
        if (this.drugStatusService.isDispensedClicked) return;
        
        this.encounterService
          .voidEncounterWithReason({
            ...drugOrder?.encounter,
            voidReason: confirmationObject?.remarks || "",
          })
          .subscribe((response) => {
            if (!response?.error) {
              this.loadVisit.emit(this.visit);
            }
            if (response?.error) {
              this.errors = [...this.errors, response?.error];
            }
          });
      }
    });
  }
  

• 可选：状态重置
  若需恢复停药功能，可在合适时机调用resetDispensedStatus，比如组件销毁、患者切换时：

  ngOnDestroy() {
    this.drugStatusService.resetDispensedStatus();
  }
  

内容的提问来源于stack exchange，提问作者Doreen