如何在Angular中收听NgbDialog公共对话框发出的事件？

如何解决如何在Angular中收听NgbDialog公共对话框发出的事件？

我有一个名为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>中的 ChildComponent ，因为Internet中的大多数教程都提供了解决方案。

所以我的问题是如何在 CommonDialogComponent 下方生成的 MyStoreListComponent 上监听事件：

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

编辑： 这是我的my-store-list.component.html：

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

那么我如何在 CommonDialogComponent 生成的 MyStoreListComponent 上监听事件？

非常感谢您的友好答复。

解决方法

世界匿名朋友；我自己解决了。

我要做的就是发送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....
          }
      });  
  }