在 ng-bootstrap 中隐藏工具提示后需要单击两次答案

【问题标题】：Need click twice after hide a tooltip in ng-bootstrap在 ng-bootstrap 中隐藏工具提示后需要单击两次
【发布时间】：2021-11-14 06:26:41
【问题描述】：

有

输入 - 在此输入上显示带有文本“A”或“B”的工具提示，
按钮 A - 打开工具提示“A”
按钮 B - 打开工具提示“B”

场景：

单击按钮 A - 工具提示“A”打开，
单击按钮 B - 我希望工具提示“A”关闭，工具提示“B”打开。但只有工具提示“A”关闭且工具提示“B”未打开。
再次单击按钮 B - 现在工具提示“B”已打开。

例子：

<div class="form-group">
  <input ngbTooltip="" triggers="manual" #tooltip="ngbTooltip" />
</div>

<button type="button" class="btn btn-outline-secondary mr-2" (click)="openA()">
  Click me to open tooltip "A"
</button>

<button type="button" class="btn btn-outline-secondary mr-2" (click)="openB()">
  Click me to open tooltip "B"
</button>

  @ViewChild('tooltip') tooltip: NgbTooltip

  openA() {
    this.tooltip.close()
    this.tooltip.ngbTooltip = "A"
    this.tooltip.open()
  }

  openB() {
    this.tooltip.close()
    this.tooltip.ngbTooltip = "B"
    this.tooltip.open()
  }

在线示例：Stackblitz（基于official example）。

我在 Bootstrap 工具提示中找到了此错误的可能解决方法：need click twice after hide a shown bootstrap popover。但我不知道如何将它与 Angular 库 ng-bootstrap (ngbTooltip) 一起使用：

【问题讨论】：

您是否尝试将ngbTooltip 引用传递给一个通用函数，如here 所示？

标签： angular bootstrap-4 ng-bootstrap

【解决方案1】：

我已经实施了解决方法。新字段（布尔标志）来决定是否应该打开工具提示，并在事件hidden 中使用它来尝试再次打开。它有效，但我认为这不是最好的解决方案。

<div class="form-group">
  <input ngbTooltip="" triggers="manual" #tooltip="ngbTooltip" 
  (hidden)="openTooltipIfShouldOpenWhenHidden()" />
</div>

<button type="button" class="btn btn-outline-secondary mr-2" (click)="openA()">
  Click me to open tooltip "A"
</button>

<button type="button" class="btn btn-outline-secondary mr-2" (click)="openB()">
  Click me to open tooltip "B"
</button>

  @ViewChild('tooltip') tooltip: NgbTooltip

  tooltipShouldOpen = false

  openA() {
    this.tooltip.close()
    this.tooltip.ngbTooltip = "A"
    this.tooltipShouldOpen = true
    this.tooltip.open()
  }

  openB() {
    this.tooltip.close()
    this.tooltip.ngbTooltip = "B"
    this.tooltipShouldOpen = true
    this.tooltip.open()
  }

  openTooltipIfShouldOpenWhenHidden() {
    if (this.tooltipShouldOpen) {
      this.tooltipShouldOpen = false
      this.tooltip.open()
    }
  }

在线示例：Stackblitz

【讨论】：