制作确认对话框的简单方法

Question

我是 Angular 新手，我想创建一个通用确认对话框，其中包含“Message”、" Yes and No" 按钮和一个文本框，用于在按下“Yes”之前从用户那里获取一些额外数据按钮。我能够执行删除操作，但我无法在调用它的组件中获取文本框数据。我想当我按下是按钮时，我也应该得到那个文本框的值，这样我就可以在我的 api 请求中使用它。我试过这个。我正在使用 ng-bootstrap。

我正在使用的组件

configD: ConfirmDialogConfig = {
    btnOkText: 'helo',
    btnCancelText:'bye'
  }
  constructor(
    private confirmationDialogService: ConfirmDialogService) { 
    
    }
  abc() {
    this.confirmationDialogService
    .confirm('', 'Are you sure do you want to delete?', this.configD)
    .subscribe(action => {
      if (action) {
        console.log('action', action);
      }
    });
  }

确认对话服务：

setConfig(config: ConfirmDialogConfig): ConfirmDialogConfig {
    return config = {
      ...this.confirmDialogConfig,
      ...config
    };
  }

  confirm(
    title: string,
    message?: string,
    config?: ConfirmDialogConfig
    ): Observable<boolean> {
    const modalRef = this.modalService.open(ConfirmDialogComponent, config ? this.setConfig(config) : this.confirmDialogConfig);
    const modalContentOptions = config ? this.setConfig(config) : this.confirmDialogConfig;
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    modalRef.componentInstance.btnOkText = modalContentOptions.btnOkText;
    modalRef.componentInstance.btnCancelText = modalContentOptions.btnCancelText;

    return from(modalRef.result);
  }

确认对话框组件

<div class="alertify-show">
    <div *ngIf="message" class="modal-body">
        <div class="row justify-content-center">
         <p class="message mb-1"> {{ message }}</p>
        </div>
        <div class="row justify-content-center">
          <label type="button" class="btn col-1 btn-block btn-soft-primary" (click)="accept()">
            {{ btnOkText }}
          </label>
          <label type="button" class="btn btn-soft-danger ml-2" (click)="decline()">
            {{ btnCancelText }}
          </label>
        </div>

        <textarea rows="3" [(ngModel)]="inputText"></textarea>
      </div>
      
</div>

它的 ts 文件

export class ConfirmDialogComponent {
  @Input() title: string;
  @Input() message: string;
  @Input() btnOkText: string;
  @Input() btnCancelText: string;
  @Output() inputData: EventEmitter<any> =  new EventEmitter<any>();
  constructor(private activeModal: NgbActiveModal) {}
  inputText: string='abc';

  accept(): void {
    this.activeModal.close(true);
    this.inputData.emit(this.inputText)
  }

  decline(): void {
    this.activeModal.close(false);
  }

  dismiss(): void {
    this.activeModal.dismiss();
  }

在这方面我还能做什么？或者任何人都知道任何其他方法可以做到这一点。请帮忙。我从最近两天开始尝试。提前谢谢！！！

Answer 1

您可以使用以下组件，在它关闭后，监听它发送的数据，以了解用户是否点击了“是”或“否”：

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss'],
})
export class ConfirmDialogComponent implements OnInit {
  constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>) {}

  ngOnInit(): void {}

  onNoClick(): void {
    this.dialogRef.close(false);
  }

  confirm() {
    this.dialogRef.close(true);
  }
}

<div class="container h-50 text-center">
  <h1>Are you sure?</h1>
  <div class="row text-center justify-content-center align-items-center">
    <button mat-flat-button class="mx-1" (click)="confirm()" color="primary">
      <mat-icon fontSet="material-icons-outlined" class="mr-2">check_circle</mat-icon>
      Yes
    </button>
    <button mat-flat-button class="mx-1" (click)="onNoClick()" color="warn">
      <mat-icon fontSet="material-icons-outlined" class="mr-2">cancel</mat-icon>
      No
    </button>
  </div>
</div>

你可以这样查看用户是否同意：

deleteUser(userId: number) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, { width: '400px' });
    dialogRef.afterClosed().subscribe((result: boolean) => result ? console.log('true') : console.log('false')
    });
  }