2017-04-27 38 views
-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 
} 
+0

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

+0

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

+0

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

回答

0

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