angular - 确认弹出后角度滑动切换没有响应

问题描述

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

我尝试过：

通过 [disabled] = isDisabled 在弹出窗口之前禁用切换（当它出现时），然后在函数中强制 true 和 false ......它确实禁用了该功能，但它在弹出窗口之前执行并禁用它。
尝试在弹出窗口之前和/或之后将检查的值变为 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;
}

标签： angularangular-material

如果您正在寻找一种方法来延迟滑块的激活，直到用户从对话框中进行选择，您可以使用(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 示例

angular - 确认弹出后角度滑动切换没有响应

问题描述

解决方案

推荐阅读