2017-04-27 4 views
-1

ngbPopoverボタンを持つコンテナコンポーネント(file-container)があります。 Popoverのコンテンツは別のコンポーネントです。 (アップロードするファイルを選択するために使用されます)。 UploadボタンがクリックされたときにNG-bootstrap close popover from container

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

アプリ - ファイルアップローダーがイベントを発します。 コンテナコンポーネントは、サーバーへの実際のファイルアップロードを処理します。
file-container TypeScriptコードでもポップオーバーの終了を処理します。サーバーからの応答を受け取った後、それはポップオーバーを閉じます。
.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

SOLUTION(午前2時でシャワー中の思想)。
ボタンをクリックしてポップオーバーを開くと(ダイナミックなドロップダウンメニューを設定するために)関数を呼び出しているので、その関数をngbPopoverをパラメータとして呼び出します。
(click)="populateDropdownList(popover)"
だから、醜いかもしれませんが、私はTSコードの中にポップオーバーを持っています。