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

Question

<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>

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

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

谢谢

Answer 1

只需要在你制作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()
}

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

How can i close this ng-template popover when a user submits?

popover

ng-bootstrap

angular