NG-bootstrap закрывает всплывающее окно из контейнера

У меня есть компонент-контейнер (называемый file-container) с кнопкой ngbPopover. Содержимое всплывающего окна — еще один компонент. (Используется для выбора файла для загрузки).

<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 также обрабатывал закрытие всплывающего окна. Чтобы после получения ответа от сервера всплывающее окно закрывалось.
Как я могу передать всплывающее окно в файл .ts, чтобы я мог вызвать на нем .close()?
РЕДАКТИРОВАНИЕ кода:

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
}

person AvailableName    schedule 27.04.2017    source источник
comment
После загрузки вы не получите ответ от вашего бэкэнда.   -  person Roman C    schedule 27.04.2017
comment
Привет, вы пробовали использовать private @ViewChild(#popContent) popOver; а затем что-то вроде MYSERVICECALLTOBACKEND.then((resp)=› { this.popOver.close() } )   -  person federico scamuzzi    schedule 27.04.2017
comment
@RomanC - я получаю ответ от бэкэнда. Я хотел бы позвонить close() после того, как получу подтверждение от моего Observable (я знаю, что эта часть работает, потому что тогда я делаю другие вещи).   -  person AvailableName    schedule 27.04.2017
comment
@federicoscamuzzi - Мы пробовали что-то подобное, но это не сработало.   -  person AvailableName    schedule 27.04.2017
comment
ммм действительно странно, вы можете опубликовать свой код ts?   -  person federico scamuzzi    schedule 27.04.2017
comment
@AvailableName Как бы вы хотели это сделать. Чтобы стать заметным, вам нужно всего лишь подписаться на событие.   -  person Roman C    schedule 27.04.2017


Ответы (2)


РЕШЕНИЕ, на которое я наткнулся (подумал в душе в 2 часа ночи).
Поскольку я вызываю функцию при нажатии кнопки и открытии всплывающего окна (для заполнения динамического раскрывающегося меню), я просто вызываю это с ngbPopover в качестве параметра.
(click)="populateDropdownList(popover)"
Так что это может быть уродливо, но теперь у меня есть всплывающее окно внутри моего кода TS, и я могу закрыть всплывающее окно, когда захочу.

person AvailableName    schedule 30.04.2017
comment
работает как шарм, никогда не недооценивайте время принятия душа в 2 часа ночи, ха-ха +1 - person sao; 09.09.2020

Демонстрация доступна здесь: https://stackblitz.com/edit/angular-gjunnt?file=app/popover-basic.ts

Результат можно увидеть по ссылке ниже: https://angular-gjunnt.stackblitz.io

Вы можете следовать приведенному ниже коду:

  1. 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>
    
  2. Вы можете иметь приведенный ниже код в своем файле 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();
      }
    }
    
person Sudhakar    schedule 11.05.2018