從容器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

回答

相關問題