Question

我有一个带有file-container按钮的容器组件（名为ngbPopover）。弹出窗口的内容是另一个组件。（用于选择要上传的文件）。

<button type="button" 
        class="btn btn-secondary popover-btn" 
        placement="top"
        [ngbPopover]="popContent" 
        popoverTitle="Click to add files - will be a label" 
        container="body" 
        trigger="manual"
        #popover="ngbPopover"
        (click)="populateDropdownList()">
  Click to add files
</button>
<template #popContent>
  <app-file-uploader [maxFiles]="maxFiles"
                      [fileNames]="fileNames"
                      (onUpload)="uploadEboxAttachment($event)">
  </app-file-uploader>
</template>

单击Upload按钮时，app-file-uploader会发出一个事件。容器组件处理实际上传到服务器的文件我希望file-container TypeScript代码也可以处理关闭popover的问题。因此，在收到服务器的回复后，它会关闭弹出窗口如何将弹出窗口传递到.ts文件，以便我可以在其上调用.close()？编辑代码：

createEboxAttachment(event):Observable<any>{
  return new Observable<any>(observer => {
    this.jsConnection.sobject("EBOX_Attachment__c").create({Name : event.selectedFile, Tender_Reply__c : this.tender.Reply.Id})
      .then(ret => observer.next(ret))
      .catch(error => observer.error(error));
  });
}

createAttachment(base64data, event, ret):Observable<any>{
  let name = event.selectedFile == this.$Label.EBOX_Other ? event.file.name : event.selectedFile;
  return new Observable<any>(observer => {
    this.jsConnection.sobject("Attachment").create({
        ParentId : ret.id,
        Name : name,
        Body : base64data.substring(base64data.lastIndexOf('base64,')+7),
        ContentType : event.file.type
      })
      .then(ret => observer.next(ret))
      .catch(error => observer.error(error));
  });
}

sendAttachToSF(base64data, event){
  this.createEboxAttachment(event).subscribe(
    ret => {
      this.createAttachment(base64data, event, ret).subscribe(att => {
        this.fileUploaded(att, event);
      });
    },
    error => this.toastr.error(error)
  );
}

uploadEboxAttachment(event){
  if (!this.jsConnection){
    this.jsConnection = window["jsConnection"];
  }
  let reader: FileReader = new FileReader();
  reader.onloadend = (e) => (this.sendAttachToSF(reader.result, event));
  reader.readAsDataURL(event.file);
}

fileUploaded(result, event){
  // this.popover.close(); would like to close popover here.
  this.onFileUploaded.emit(att); //emit event to parent component. works
}

Answer 1

我偶然发现的解决方案（想到凌晨2点的淋浴）由于我在单击按钮并打开弹出窗口（填充动态下拉菜单）时调用了一个函数，因此我只需将ngbPopover作为参数调用该函数。
(click)="populateDropdownList(popover)"
所以，它可能很难看，但现在我的TS代码中有popover，我可以随时关闭popver。

NG-bootstrap从容器关闭popover

1 个答案: