如何等待 angular 13 中的引導模態響應？

Question

我是 angular 的新手，正在嘗試調用引導模式並等待其響應，一切正常，除了它沒有返回任何值：

PS：我用的是bootstrap5 CDN版

這是我的 bootstrap.component.ts：

  showConfirmation() {
    this.confirmationModal.show();
  }


  closeConfirmation() {
    this.confirmationModal.hide();
  }

  confirmationOk(): boolean {
    this.confirmationModal.hide();
    return true;
  }

  confirmationDeclined(): boolean {
    this.confirmationModal.hide();
    return false;
  }

我的 bootstrap.component.html：

<button type="button" class="btn btn-secondary radius-none" (click)="confirmationOk()">Yes</button>
          <button type="button" class="btn btn-primary radius-none" (click)="confirmationDeclined()">No</button>

和我的 parent.component.ts：

 let x = await this.popupModal.showConfirmation()
 console.log(x) //-------No value here

我只想調用this.popupModal.showConfirmation()然后等待確認按鈕被點擊並獲取響應值。 有沒有辦法實現它？

Answer 1

您可以嘗試在模態組件中定義一個可觀察對象，並在打開模態組件並在父組件中訂閱時返回可觀察對象。 所以在你的bootstrap.component.ts

  _onClose:Subject<any>=new Subject<any>();

  showConfirmation() {
    this.confirmationModal.show();
    retrun {
     onClose:()=>this._onClose;
    }
  }


  closeConfirmation() {
    this.confirmationModal.hide();
    this._onClose.next(false);
  }

  confirmationOk(): boolean {
    this.confirmationModal.hide();
    this._onClose.next(true);
  }

  confirmationDeclined(): boolean {
    this.confirmationModal.hide();
    this._onClose.next(false);
  }

然后在你的父組件中

this.popupModal.showConfirmation().onClose().subscribe(value=> {
  console.log(value);
});