Question

我是Angular的新手所以请耐心等待。我有3个文件：WarningComponent（显示警告模式（bootstrap）），modalService（这将打开模态）和votingComponent。

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

我想要的是：当用户按下确认时，函数postSelectionChoice（）应该在votingComponent中触发。

我试过用Promise和Observable来实现它，但是对我没有用，或者我已经实现了那些错误...

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

  }

Modal.Service.ts

@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);
      }
  });
  }
}

WarningComponent.ts

export class WarningModalComponent {

  @Input() message;

  constructor(public activeModal: NgbActiveModal) {
  }

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

}

Answer 1

votingComponent.ts

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

在构造函数中：

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);
    }

Answer 2

modal-Control-service.ts

 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();
  }

modal-component.ts

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

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

在这里，我在ngx-bootstrop库中使用模态。

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

2 个答案: