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

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

1
2
3
4
5
6
7

# 父组件中，调用发起方

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

# 同步调用

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