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
}
アップロード後、バックエンドから返信が届きません。 –
こんにちは、プライベート@ViewChild( "#popContent")popOverで試してみましたか?その後、MYSERVICECALLTOBACKEND.then((resp)=> {this.popOver.close()})のようになります。 –
@RomanC - 私はバックエンドから返信を受け取ります。私はObservableからの確認を受け取った後、close()を呼びたいと思います(私は他のことをしているので、その部分が動作することを知っています)。 – AvailableName