用户提交时如何关闭此ng-template弹出窗口？

问题描述

<ng-template #Question>
    <div class="d-flex flex-column align-items-center" style="width: 250px">
      <textarea
        [(ngModel)]="questionInput"
        type="text"
        placeholder="ask a ?"
        class="w-90"
        style="height: 100px"
      ></textarea>
      <div class="w-90 m-2 d-flex justify-content-end">
        <button (click)="askQuestion()" class="btn">
          Submit
        </button>
      </div>
    </div>
  </ng-template>

使用ngbootstrap在Angular 7中工作，我有一个出现在弹出窗口中的模板，该模板从[ngbPopover]="Question"的{{1}}上方调用。试图弄清楚如何在单击提交时关闭弹出窗口。我看到了其他答案，这些答案从打字稿中调用了参数<div>，但是我的代码中没有任何此类参数。认为这是使用nbbootstrap的目的。我知道必须有一种简单的方法可以将弹出框绑定到使用popover事件监听器切换的参数。或者我可以在模板中添加参数来执行此操作？

我如何在提交时关闭弹出窗口？

谢谢

解决方法

只需在创建弹出框的元素中添加一个引用变量，并在提交时使用close方法

<!--see the #p="ngbPopover"-->
<div #p="ngbPopover" [ngbPopover]="Question" ...>

在您的按钮

 <button (click)="p.close();askQuestion()" class="btn">

如果您要管理，例如questionInput！=“”，您还可以将引用变量传递给函数askQuestion

 <button (click)="askQuestion(p)" class="btn">

您的函数askQuestion

askQuestion(p:NgbPopover)
{
  if (questionInput)
     p.close()
}

angular ng-bootstrap popover