Question

我正在关注this article以获得使用Angular 2的引导程序。虽然按照文章的规定工作，但没有关于如何将popover的引用传递给组件方法的示例。我得到的只是一个NgbPopoverConfig，但没有参考来打开popover。

这是我的组件方法

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>

有关如何以编程方式打开和关闭打字稿组件代码中的popover的任何文档？还是一些示例代码？

我使用角度2.1.0与Bootstrap 4.0.0-alpha.5和角度材料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

4 个答案: