在 NgbTooltip 内容中包含超链接（带有 _blank 目标）属性

Question

我对 NgbTooltip 有要求，

工具提示应允许包含带有“_blank”目标的超链接。例如：了解更多
单击文档正文时工具提示应隐藏。

以下是我的方法，并没有按预期工作。

<a [ngbTooltip]="hintTooltip" tabindex="0"  triggers="click:blur">hint</a>
<ng-template #hintTooltip>
  Sample hint description
  <a href="www.abc.com" target="_blank">Learn more</a>
</ng-template>

以上代码通过显示超链接打开工具提示。但是当我单击超链接时，它没有打开新的 window，而是隐藏了工具提示。

堆栈闪电战：https://stackblitz.com/edit/angular-viipeo-dqjmfh?file=app/tooltip-triggers.html

如果有人能提供帮助，我们将不胜感激

Answer 1

使用 ViewChild 获取对元素的引用，然后使用工具提示方法关闭

 @ViewChild('ref') ref;
  @HostListener('mouseleave',['$event']) onHoverOutside(){
   this.ref.close();
  }

示例：https:https://stackblitz.com/edit/angular-viipeo

Answer 2

已解决，有兴趣的朋友，下面是解决方法

.html

<a [ngbTooltip]="hintTooltip" tabindex="0"  triggers="click:blur">hint</a>
    <ng-template #hintTooltip>
      Sample hint description
      <a href="www.abc.com" target="_blank" (click)="nToolTip(t1, 'http://www.google.com');">Learn more</a>
    </ng-template>

.ts

_toolTipCollection = [];
nToolTip(tooltip, _url?: string): void {
    if (tooltip.isOpen()) {
        if (_url) {
            window.open(_url, '_blank');
        }
    }
    for (const tooltip of this._toolTipCollection) {
        tooltip.close();
    }
    this._toolTipCollection = [];

    tooltip.toggle();
    this._toolTipCollection.push(tooltip);
}

在 NgbTooltip 内容中包含超链接（带有 _blank 目标）属性

Include Hyperlink (with _blank target) property inside NgbTooltip content

javascript

ng-bootstrap

angular