1

我正在关注这篇文章以使引导程序与 Angular 2 一起工作。虽然按照文章的方式工作，但没有关于如何将弹出框的引用传递给组件方法的示例。我得到的只是一个NgbPopoverConfig，但没有打开弹出窗口的参考。

这是我的组件方法

popOpen(p : NgbPopoverConfig): void {

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

这是我使用基于材料 2 的输入字段的 html。

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

有关如何从打字稿组件代码以编程方式打开和关闭弹出框的任何文档？或一些示例代码？

我将 Angular 2.1.0 与 Bootstrap 4.0.0-alpha.5 和 Angular 材料 2.0.0-alpha.9-3 一起使用

4

4 回答 4

1

似乎你打错了：它应该open代替Open. Javascript 区分大小写

Plunker 示例

于 2016-11-14T05:42:25.603 回答
1

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

于 2016-11-14T18:23:09.937 回答
1

这是对我有用的代码

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>
于 2019-03-22T03:36:05.597 回答
0

如果您的环境如下，则需要执行一些操作才能使用关闭或打开 API：

ng-bootstrap：1.xx，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>

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

于 2018-11-08T23:39:06.270 回答