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)"是一个返回布尔值的函数，该布尔值指示是否应禁用按钮。传入p（NgbPopover）可以使其在isDisabled函数中以编程方式打开。

TypeScript

isDisabled函数如下所示：

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

这将检查disabled属性的值（这只是我在TypeScript文件中定义的布尔值），如果为true，则会打开弹出窗口。然后返回该值，以便HTML模板可以相应地启用/禁用按钮。

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

如何从代码中以编程方式打开NgbPopOver而不实际单击按钮

1 个答案: