如何解决用户提交时如何关闭此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()
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。