以编程方式从 angular 2 组件打开 ngbpopover

Question

我正在关注 this article 以让 bootstrap 与 Angular 一起工作 2. 虽然按照文章的方式工作，但没有示例说明如何将弹出窗口的引用传递给组件方法。我得到的只是一个 NgbPopoverConfig 但它没有打开弹出窗口的参考。

这是我的组件方法

popOpen(p : NgbPopoverConfig): void {

    p.open(); //get an error here saying no Open method on NgbPopoverConfig
 }

这是我的 html，我在其中使用基于 material 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>

关于如何从 typescript 组件代码以编程方式打开和关闭弹出窗口的任何文档？或一些示例代码？

我正在使用 angular 2.1.0 与 Bootstrap 4.0.0-alpha.5 和 angular material 2.0.0-alpha.9-3

Answer 1

您似乎打错了：应该是 open 而不是 Open。 Javascript 区分大小写

Plunker Example

Answer 2

解决了。有两件事我必须做。首先获取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;有谁知道为什么这会产生注册模糊事件的魔法？

Answer 3

如果您的环境如下所示，您需要做一些事情才能使用关闭或打开 API：

ng-bootstrap: 1.x.x,Angular: 5.0.2,Bootstrap CSS: 4.0.0

在您的 component.ts 中，您需要导入 'NgbPopover':

import {NgbPopover } from '@ng-bootstrap/ng-bootstrap';

  openPop(p : NgbPopover): void {
    this.popover.isOpen() ? this.popover.close() : this.popover.open();
  }

在您的 HTML 模板中，

<button #popover="ngbPopover" placement="bottom" ngbPopover="adfga"  popoverTitle="Popover on left" triggers="manual" (click)="openPop(popover)"></button>

但是，如果您的环境不同，您可能需要查看他们的官方文档以了解他们实施了哪些更改。

Answer 4

这是适合我的代码

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>

以编程方式从 angular 2 组件打开 ngbpopover

programmatically open ngbpopover from angular 2 component

typescript

angular-material

bootstrap-4

ng-bootstrap

angular