Angular 等待用户按确认/拒绝，然后执行某些操作

我是新手，所以请容忍我。我有3个文件：WarningComponent（显示警告模式（引导））、modalService（这将打开modals）和votingComponent

在votingComponent中有一个按钮：投票。按下此按钮时，警告组件打开（使用modalService）。警告组件有两个按钮：确认和拒绝

我想要的是：当用户按下Confirm时，函数postSelectionChoice（）应该在votingComponent中启动

我曾试图实现这一承诺和可观察的，但没有为我工作，或我已经实施这些错误

votingComponent.ts

  private showWarning() {
    // This gets fired when the user presses on Vote
    this.modalService.openModal(ModalType.WARNING,"test");
  }

  private postSelectionChoice() {
   // This should fire when the user presses on Confirm in the WarningComponent

  }

export class WarningModalComponent {

  @Input() message;

  constructor(public activeModal: NgbActiveModal) {
  }

  public confirmButton() {
    // This gets fired when the user presses the confirm button
  }

}

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';

 modalRef: BsModalRef;
     constructor(public modalControl: ModalControlService, public modalService: BsModalService, ) {

modalControl.showConfirmModal.subscribe((nextValue) => {
  // this will happen on every change
  if (nextValue) {
    this.modal.show();
  }
});
  }

模态服务

@Injectable()
export class ModalService {

  constructor(private modalService: NgbModal) { }

  public openModal(modal: ModalType, message: string) {
    let modalRef :NgbModalRef = null;
    if(modal == ModalType.ALERT) {
      modalRef = this.modalService.open(AlertModalComponent);
    } else if (modal == ModalType.WARNING) {
      modalRef = this.modalService.open(WarningModalComponent);
    } else if (modal == ModalType.SUCCES) {
      modalRef = this.modalService.open(SuccesModalComponent);
    }
    modalRef.componentInstance.message = message;
  }

  // Tried this as example...
  public getConfirmation(status: Warningstatus) : Promise<Boolean> {
    return new Promise((resolve, reject) => {
      if(status == Warningstatus.YES) {
          console.log("trueeee");
          resolve(true);
      } else if(status == Warningstatus.NO) {
        console.log("falseeee");
          resolve(false);
      }
  });
  }
}

votingComponent.ts

  private showWarning() {
    // This gets fired when the user presses on Vote
    this.modalService.openModal(ModalType.WARNING,"test");
  }

  private postSelectionChoice() {
   // This should fire when the user presses on Confirm in the WarningComponent

  }

export class WarningModalComponent {

  @Input() message;

  constructor(public activeModal: NgbActiveModal) {
  }

  public confirmButton() {
    // This gets fired when the user presses the confirm button
  }

}

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';

 modalRef: BsModalRef;
     constructor(public modalControl: ModalControlService, public modalService: BsModalService, ) {

modalControl.showConfirmModal.subscribe((nextValue) => {
  // this will happen on every change
  if (nextValue) {
    this.modal.show();
  }
});
  }

在构造函数中：

constructor(        
    private _modalService: NgbModal
) { }

显示您的模式：

showWarning() {
    const modalRef = this._modalService.open(WarningModalComponent, { size: 'lg' });
    modalRef.componentInstance.SomeInputDataToModal = yourdata;
    modalRef.result.then((result) => {
        if (result) {                
            console.log("trueeee");
        }
    },
        (reason) => { });
    }

在WarningComponent.ts中：

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

    constructor(
        public activeModal: NgbActiveModal
    ) { }


    onClose() {
        this.activeModal.close(false);
    }

    onDismiss() {
        this.activeModal.dismiss(false);
    }

    onResult() {
        // do something with you data and send result
        this.activeModal.close(yourreturndatatoparent);
    }

---

模态控制服务

 public showConfirmModal: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 simpleObservable: Observable<{}>;
 reAction: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); 

 confirmDialog(action: string, objectValue: string, objectType: string) {

  let simpleObservable;
  const reAction = this.reAction;
  const promise = Promise(function (resolve, reject) {

  simpleObservable = new Observable((observer) => {

    observer.complete();
    if (reAction.value !== null) {
      resolve(reAction.value);
    }
    reject('Invalid action');
  });

  });

  this.simpleObservable = simpleObservable;
  this.showConfirmModal.next(true);
  return promise; 
 }

 confirm() {
  this.reAction.next(true);
  this.subscribe = this.simpleObservable.subscribe();
  this.subscribe.unsubscribe();
 }

 decline() {
  this.reAction.next(false);
  this.subscribe = this.simpleObservable.subscribe();
  this.subscribe.unsubscribe();
  }

在这里，我在ngx bootstrop库中使用modal