Tengo un componente de contenedor (llamado file-container
) con un botón ngbPopover
. El contenido del popover es otro componente. (Se utiliza para seleccionar un archivo para cargar).
<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>
El cargador de archivos de la aplicación emite un evento cuando se hace clic en el botón Upload
. El componente contenedor maneja la carga real del archivo al servidor.
Quiero que el código TypeScript file-container
maneje el cierre del popover también. Entonces, después de recibir una respuesta del servidor, cierra la ventana emergente.
¿Cómo puedo pasar el popover al archivo .ts
para poder llamar a .close()
en él?
EDIT- ts código:
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 }
La demostración está disponible aquí: https://stackblitz.com/edit/angular-gjunnt?file=app/popover-basic.ts
La salida se puede ver en el siguiente enlace: https://angular-gjunnt.stackblitz.io
Puedes seguir el siguiente código:
archivo de plantilla html
<ng-template #popContent> <ngb-alert *ngIf="maskEditorAppliedMessage" type="success" (close)="closePopover()">{{ maskEditorAppliedMessage }}</ngb-alert> </ng-template> <div [ngbPopover]="popContent" #popOver="ngbPopover" triggers="manual" placement="bottom"></div> <button type="button" class="btn btn-outline-secondary mr-2" (click)="openPopover()"> Apply </button>
Puede tener el siguiente código en su archivo ts.
import { Component, ViewChild } from '@angular/core'; import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'ngbd-popover-basic', templateUrl: './popover-basic.html' }) export class NgbdPopoverBasic { maskEditorAppliedMessage: string; @ViewChild('popOver') public popover: NgbPopover; public closePopover(): void { this.maskEditorAppliedMessage = null; if (this.popover.isOpen()) this.popover.close(); } public openPopover(): void { console.log('open' + this.popover.isOpen()); this.maskEditorAppliedMessage = "Successfully Applied"; if (!this.popover.isOpen()) this.popover.open(); } }
SOLUCIÓN con la que me topé (pensé en la ducha a las 2 am).
Dado que estoy llamando a una función cuando se hace clic en el botón y se abre el popover (para completar un menú desplegable dinámico), simplemente llamo a esa función con ngbPopover como parámetro.
(click)="populateDropdownList(popover)"
Entonces, puede ser feo, pero ahora tengo la ventana emergente dentro de mi código TS, y puedo cerrar la ventana emergente cuando quiera.