如何在不实际单击按钮的情况下以编程方式从代码打开 NgbPopOver

Question

要求显示一条信息消息，说明为什么禁用保存按钮。要启用保存按钮，必须选择一些强制性过滤器。因此，为了让用户意识到这一点，我试图在禁用的按钮上显示一个显示必要信息的弹出窗口。我想在按钮被禁用后立即显示弹出窗口以显示在按钮顶部。截至目前，我目前的代码试图实现大部分要求，除了我必须物理悬停或单击按钮以显示弹出窗口。由于后面代码中的某些逻辑，我想在按钮被禁用后立即显示弹出窗口。

<button id="btnCancel" title="Cancel" aria-label="Cancel Filter dialog" class="btn btn-cancel"
            style="margin-right: 5px;" (click)="close();" (keydown)="trapFocus('cancel',$event)">CANCEL</button>
          <button id="btnApply" title="Apply" class="btn btn-primary"
          [disabled]="!(checkIfAnyFiltersAreSelected() && checkIfMandatoryFiltersAreSelected())"
          (click)="onApply()" (keydown)="trapFocus('apply',$event)">
            <span triggers="hover" *ngIf="!checkIfMandatoryFiltersAreSelected(); else elseTemplate" [ngbPopover]="popContent"
              popoverTitle="Mandatory Filters">
              APPLY
            </span>
            <ng-template #elseTemplate>
              APPLY
            </ng-template>
          </button>
          <ng-template #popContent>Necessary Information to be shown here</ng-template>

试图按照这个问题中的解决方案进行操作，但答案不明确且无法解决问题

ngbPopover will not close and will open on load

Answer 1

您可以通过为弹出窗口定义一个手动触发器并将弹出窗口传递给确定按钮是否被禁用的函数来实现这一点，这样如果按钮被禁用，弹出窗口就可以通过编程方式打开。

HTML模板

如果按如下方式定义按钮：

<button type="button" class="btn btn-outline-secondary mr-2" 
    placement="top" ngbPopover="Displayed when button is disabled"
    triggers="manual" #p="ngbPopover" [disabled]="isDisabled(p)">
      Apply
</button>

triggers="manual"表示悬停在按钮上不会自动触发
#p="ngbPopover"是对NgbPopover对象的引用
[disabled]="isDisabled(p)" 是一个函数，returns 一个布尔值，指示是否应禁用按钮。传入 p（NgbPopover）允许它在 isDisabled 函数中以编程方式打开。

TypeScript

isDisabled 函数如下所示：

isDisabled(popover) {
  if (this.disabled) {
    popover.open();
  }
  return this.disabled;
}

这会检查 disabled 属性的值（这只是我在 TypeScript 文件中定义的一个布尔值），如果为真，将打开弹出框。然后 returns 值，以便 HTML 模板可以相应地 enable/disable 按钮。

请参阅 this StackBlitz 进行演示。如果您切换复选框（绑定到 disabled TypeScript 属性，您将看到在禁用按钮时显示弹出窗口。

如何在不实际单击按钮的情况下以编程方式从代码打开 NgbPopOver

How to Programatically open NgbPopOver from code without actually clicking on a button

html

typescript

ng-bootstrap

angular6