如何收听NgbDialog公共对话框以角发出的事件？

Question

我有一个名为CommonDialogComponent的对话框，它能够显示MyStoreListComponent请求的项目列表。

export class MyStoreListComponent implements OnInit {
  featureStores:any = [];
  variantTitleCode=ClientHomeEnum.mystore;
 
  constructor(private modalService: NgbModal,
    private storeService:StoreService) {
  }

  ngOnInit() {
    this.getMyStores();
  }
  
  getMyStores(){
    this.storeService.getStores()
    .subscribe(res=>{
      this.featureStores=res;
    })
  }

  openPopUp(){
    const modalRef = this.modalService.open(CommonDialogComponent);
    modalRef.componentInstance.variantTitleCode= this.variantTitleCode;
  }
  
}

CommonDialogComponent是一个通用对话框，顾名思义。因此，它不是<app-router></app-router>内部的<app-router></app-router>，因为互联网上的大多数教程都给出了解决方案。

因此，我的问题是如何在MyStoreListComponent上收听由CommonDialogComponent生成的事件，如下所示：

export class CommonDialogComponent implements OnInit {
  
  storeIdValueArray=[];
  @Output() storeDict:EventEmitter<Array<storekeyvalue>>=new EventEmitter();
  @Input() variantTitleCode;
  constructor(
  public activeModal: NgbActiveModal
  private storeService:StoreService
  ) 
  {
  }

  ngOnInit() {
    this.getAllItems();
  }
  
  onSave(){
    switch(this.variantTitleCode){
      case ClientHomeEnum.mystore:
        this.storeService.postStoreOrder(this.storeIdValueArray)
        .subscribe(response=>{
          if(response){
            this.storeDict.emit(this.storeIdValueArray);
          }else{
            this.alertyfy.error("Task Incomplete.");
          }
        });
        this.activeModal.close('Ok click');
      break;
      default: console.log("");
    }
  }
}

编辑：这里是我的商店-list.：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <button type="button" class="btn btn-primary m-b-10" data-toggle="modal" data-original-title="test" (click)="openPopUp()">
                Add My Store
            </button>
        </div>
        <div class="col-sm-12">
            <div class="card">
                  <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                            <thead>
                                    <tr>
                                        <th scope="col">
                                            Store
                                        </th>
                                        <th scope="col">
                                            Order
                                        </th>                         
                                    </tr>
                                </thead>
                                <tbody cdkDropList (cdkDropListDropped)="onDrop($event)">
                                    <tr *ngFor='let item of myStores; let idx=index;'  cdkDrag cdkDragLockAxis="y">
                                        <td class="col-md">
                                            {{item.storeName}}
                                        </td>
                                        <td class="col-md">
                                            {{item.order}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

那么，我如何才能收听MyStoreListComponent上由CommonDialogComponent生成的事件呢？

非常感谢您的回应。

Answer 1

世界上的匿名朋友，我自己解决的。

我所要做的就是发送this.storeIdValueArray和一些布尔值，以确保当模式关闭时按下保存按钮；我这样做了：

this.activeModal.close({'isSavePressed':true,'storeIdValueArray': this.storeIdValueArray});

我收到了关于父组件的信息：

openPopUp(){
    const modalRef = this.modalService.open(CommonDialogComponent);
    modalRef.componentInstance.variantTitleCode = this.titleCode;
    modalRef.result
      .then((emitted) => {
          console.log(emitted);
            //the business logic goes here....
          }
      });  
  }