NG-bootstrap 从容器中关闭弹出窗口

Question

我有一个带有 ngbPopover 按钮的容器组件（称为 file-container）。弹出窗口的内容是另一个组件。（用于select一个文件上传）。

<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 按钮时，app-file-uploader 会发出一个事件。容器组件处理实际文件上传到服务器。
我希望 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
}

Answer 1

我偶然发现的解决方案（凌晨 2 点在淋浴时想到的）。
由于我在单击按钮并打开弹出窗口时调用了一个函数（以填充动态下拉菜单），因此我只需使用 ngbPopover 作为参数调用该函数。
(click)="populateDropdownList(popover)"
所以，它可能很难看，但现在我的 TS 代码中有了弹出窗口，我可以随时关闭弹出窗口。

Answer 2

此处提供演示：https://stackblitz.com/edit/angular-gjunnt?file=app/popover-basic.ts

输出如下link： https://angular-gjunnt.stackblitz.io

您可以按照以下代码：

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>

您可以在您的 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();
  }
}

NG-bootstrap 从容器中关闭弹出窗口

NG-bootstrap close popover from container

ng-bootstrap

angular