Angular 弹框与父组件之间传值的问题（最重要的是父组件接收子组件的返回值）

文章目录

1. 子组件（弹框 modal）中
2. 父组件中，调用发起方
3. 同步调用
4. 参考链接

@Output() action = new EventEmitter();

// now on click ok button emit the output from confirmPopupComponent
public clickOk() {
    this.loading = true;
    this.action.emit(true); // 提交给父组件，here you can send object  instead of true
}

父组件中，调用发起方

LocateDiskAction(lightState) {
    this.clickModal = true  // 弹框置true
    let lightDisk = await this.getDisklight(lightState)
    let initialState = {
      lightDisk: lightDisk,
      action: lightState,
      hostName: this.hostName,
    };
    let bsModalRef = this.modalService.show(DiskLocateModalComponent, {
      initialState,
    });
    bsModalRef.content.action.take(1).subscribe((value) => {
        console.log(value) // here you will get the value
    });
    }

如果上面的调用出错，可以试试下面的方法：

openModalWithComponent() {
  const initialState = {
    list: [
      {"tag":'Count',"value":this.itemList.length}
    ]
  };
  this.bsModalRef = this.modalService.show(ItemAddComponent, {initialState});
  this.bsModalRef.content.closeBtnName = 'Close';

  this.bsModalRef.content.event.subscribe(res => {
    this.itemList.push(res.data);
  });
}

同步调用

async LocateDiskAction(lightState) {
  this.clickModal = true  // 弹框置true
  let lightDisk = await this.getDisklight(lightState)
  let initialState = {
    lightDisk: lightDisk,
    action: lightState,
    hostName: this.hostName,
  };

  let bsModalRef = this.modalService.show(DiskLocateModalComponent, {
    initialState,
  });

  let newSubscriber = this.modalService.onHide.subscribe(r=>{
    newSubscriber.unsubscribe();
    this.clickModal = false
    console.log('DATA',bsModalRef.content);
  });
}

getDisklight(diskSignal) {
  return this.client.get(`api/disk/${this.hostName}?disk_status=${diskSignal}`).toPromise();
}

子组件（弹框 modal）中

父组件中，调用发起方

同步调用

参考链接