从容器NG-bootstrap关闭popover

-1

我有一个容器组件（称为file-container）与ngbPopover按钮。 popover的内容是另一个组件。（它用于选择要上传的文件）。从容器NG-bootstrap关闭popover

<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按钮时发出的事件。容器组件处理实际上传到服务器的文件。
我希望file-container TypeScript代码也可以处理关闭弹出窗口。所以当它收到服务器的回复后，它会关闭弹出窗口。
如何将popover传递给.ts文件，以便我可以调用.close()？
编辑 - TS码：

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 
}

来源

2017-04-27 AvailableName

上传后，您将无法从您的后端得到回复。 –

你好你有私人@ViewChild（“＃popContent”）popOver;然后类似于MYSERVICECALLTOBACKEND.then（（resp）=> {this.popOver.close（）}） –

@RomanC - 我从后端得到回复。我想从我的Observable获得确认后调用close（）方法（我知道那部分工作原因是因为我正在做其他事情）。 – AvailableName

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

来源

2017-04-30 07:32:19 AvailableName

从容器NG-bootstrap关闭popover

回答

相关问题