确认弹出后角度滑动切换没有响应答案

【问题标题】：Angular slide-toggle not responding to after confirm popup确认弹出后角度滑动切换没有响应
【发布时间】：2021-03-24 23:58:57
【问题描述】：

我有一个问题，我试图在取消切换之前弹出一个确认删除（“您确定要取消切换”）的弹出窗口。此时，如果用户取消切换滑块，弹出窗口确实会出现，但切换会自动取消，而不是等待用户响应。

我尝试过：

通过 [disabled] = isDisabled 在弹出窗口之前禁用切换（当它出现时），然后在函数中强制 true 和 false...它确实禁用了该功能，但它在弹出窗口之前执行并禁用它。
尝试在弹出窗口之前和/或之后将 checked 的值设置为 true，例如 [checked] = isChecked，然后在函数中强制 true 和 false
我之前用过一个(change)，但是以为函数只有在值改变后才会运行，于是改成了(toggleChange)
我尝试给切换按钮一个 id，然后通过 id.click() 强制点击

这里是 HTML

<mat-slide-toggle id="pingSlider" (toggleChange)="onTogglePing()" [disabled]="disablePingToggle" [checked]="isToggledPing"> </mat-slide-toggle>

这是 TS 文件

onTogglePing(): void {
    if (!this.isToggledPing) {
      this.isToggledPing = true;
      this.formControlName.addControl('ping', this.pingFormGroup);
    } else {
      this.disablePingToggle = true;
      this.showConfimFormControlRemoval().then(
        res => {
          if (res) {
            this.formControlName.removeControl('ping');
            this.isToggledPing = false;
          }
        },
        err => {
          if (err) {
            console.log(err);
          }
        }
      );
    }
}

showConfimFormControlRemoval(): Promise<any> {
    const modalRef = this.modalService.open(ConfirmActionModalComponent, { size: 'md', centered: true });
    modalRef.componentInstance.title = this.util.getTranslated('remove_configuration');
    modalRef.componentInstance.message = this.util.getTranslated('profile_confirm_modal_msg_reset_user');
    modalRef.componentInstance.primaryButtonText = this.util.getTranslated('confirm');
    return modalRef.result;
}

【问题讨论】：

标签： angular angular-material

【解决方案1】：

如果您正在寻找一种方法来延迟滑块的激活，直到用户从对话框中选择，您可以使用(click) 和(keypress) 事件而不是(toggleChange)，这样您就可以使用$event.preventDefault() 来停止控件响应用户事件：

<mat-slide-toggle 
  [checked]="isChecked"
  (click)="onToggleChange($event)"
  (keyup.space)="onToggleChange($event)">
</mat-slide-toggle>

  onToggleChange($event) {
    $event.preventDefault();
    
    if(this.isChecked) {
      this.dialog.open(ModalComponent).afterClosed().subscribe(
        confirmed => { if(confirmed) this.isChecked = false; }
      );
    } else {
      this.isChecked = true;
    }

  }

这是一个简化的StackBlitz example

【讨论】：