从角2组件编程打开ngbpopover
从角2组件编程打开ngbpopover
提问于 2016-11-14 05:00:55
我跟随这篇文章使引导程序与角2一起工作，虽然这和本文一样有效，但是没有示例说明如何将弹出的引用传递给组件方法。我得到的只是一个NgbPopoverConfig，但它没有打开弹出窗口的引用。
这是我的组件方法
popOpen(p : NgbPopoverConfig): void {
p.open(); //get an error here saying no Open method on NgbPopoverConfig
}这是我的html，在这里我使用了一个基于材料2的输入字段。
<md-input type="email" value="" name="em" id="em" placement="left" ngbPopover="adfga" popoverTitle="Popover on left" triggers="manual" #p="ngbPopover" (click)="p.Open()" [(ngModel)]="thisModel.email"
#this="ngModel">
</md-input>有关于如何从类型记录组件代码中以编程方式打开和关闭弹出窗口的文档吗？还是一些样本代码？
我使用的是角2.1.0和引导带4.0.0-α5和角材料2.0.0-α-9-3
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-11-14 18:23:09
解决了。我必须做两件事。首先获得对ngbPopover的引用
import {NgbPopover } from '@ng-bootstrap/ng-bootstrap/popover/popover';
并将“组件”方法更改为：
popOpen(p : NgbPopover): void {
p.open();
}然后像这样注册偶数处理程序：
<md-input type="email" value="" name="em" id="em" placement="left" ngbPopover="adfga" popoverTitle="Popover on left" triggers="manual" #p="ngbPopover" (blur)="edit=!edit; checkExists(p)" [(ngModel)]="thisModel.email"
#this="ngModel">
</md-input>现在，当我失去了对文本框的控制时，我将有一个组件方法，它将检查电子邮件是否存在，如果有，我现在可以使用p的引用来触发open()方法。
我想知道更多关于这个edit=!edit;，有人知道为什么这创造了魔法注册模糊事件吗？
Stack Overflow用户
发布于 2016-11-14 05:42:25
似乎你输入错了:它应该是open而不是Open。Javascript区分大小写
Stack Overflow用户
发布于 2019-03-22 03:36:05
这是对我有用的代码
import {Component} from '@angular/core';
import {NgbPopover } from '@ng-bootstrap/ng-bootstrap/popover/popover';
@Component({
selector: 'ngbd-popover-triggers',
templateUrl: './popover-triggers.html'
})
export class NgbdPopoverTriggers {
condition : boolean = true;
openPop(popover : NgbPopover): void {
console.log(this.condition);
popover.isOpen() ? popover.close() : popover.open();
}
}和组件的HTML代码
<br>
<br>
<br>
<br>
<div>
<ng-template #popContent>Hello, <b>{{name}}</b>!
<button (click)="onClickYes()" type="button" class="btn btn-outline-secondary" >
Yes
</button>
<button (click)="onClickNo()" type="button" class="btn btn-outline-secondary" >
No
</button>
</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
</div>
<button placement="top" [popoverTitle]="popTitle" #popover="ngbPopover" [ngbPopover]="popContent" triggers="manual" (click)="openPop(popover)">click me </button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40582133
复制相关文章
相似问题
腾讯云开发者
