通過ngx bootstrap modal函數向子組件傳遞數據

Question

我在角度應用程序的父組件中有以下代碼

父組件

<div>
    <button *ngIf="data.type == 'el'" (click)="readInfo('el')">click</button>
    <button *ngIf="data.type == 'ga'" (click)="readInfo('ga')">click</button>
</div>


readInfo(type) {
    if (type === 'el') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, el);
    } else if (type === 'ga') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, ga);
    }
  }

子組件

 <div class="container" *ngIf="el">
      <!-- el contents goes here -->
  </div>

  <div class="container" *ngIf="ga">
    <!-- ga contents goes here -->
</div>

我想通過模態函數將值從我的父組件傳遞給 ChildComponent。 我的目標是在我的 ChildComponent 中檢索這個值並使用 *ngIf 顯示基於它的內容

Answer 1

解決方案1

使用回調將數據傳遞回父組件，並通過組件屬性將其傳遞給子組件。

this.modalSvc.show(LoadGeneratorAddModalComponent, {
         initialState: {
            successCb: (data) => {
                // data come from the modal, assign it to your variable in parent component
                this.dataPassToChild = data;
            }
         }
      }
    ); 

解決方案2

您始終可以通過服務傳遞數據、創建主題並在服務中公開可觀察對象。 可以在子組件中觀察observable，在模態組件中觸發事件。