Popover/tooltip ui bootstrap angular 6 under condition答案

【问题标题】：Popover/tooltip ui bootstrap angular 6 under conditionPopover/tooltip ui bootstrap angular 6 under condition
【发布时间】：2018-09-07 17:08:42
【问题描述】：

我必须在某些情况下打开弹出框。我怎样才能做到这一点？

  <div class="btn btn-outline-secondary" *ngFor="let category of categories"
  [ngbPopover]="tipContent"
  popoverClass="change-category-info"
  placement="bottom"
  tooltipClass="change-category-tooltip">{{category}}</div>

在此实现中，弹出窗口始终在单击后打开。我想在条件下打开这个弹出窗口，例如，如果 this.isChanged = true

【问题讨论】：

标签： angular popover ng-bootstrap

【解决方案1】：

您可以使用triggers="manual" 输入完全手动控制弹出框。

<button ... triggers="manual" #p="ngbPopover" (click)="isChanged && p.open()">
  Popover on right
</button>

Stackblitz Example

Example with ngFor

另见：

https://ng-bootstrap.github.io/#/components/popover/examples#triggers

【讨论】：

【解决方案2】：

您可以使用disablePopover 输入来阻止弹出框显示，如API documentation 中所述。

假设isChanged 是您组件中的公共属性，它看起来像这样：

  <div class="btn btn-outline-secondary" 
       *ngFor="let category of categories"
       [ngbPopover]="tipContent"
       popoverClass="change-category-info"
       placement="bottom"
       tooltipClass="change-category-tooltip"
       [disablePopover]="!isChanged">{{category}}</div>

【讨论】：