代码之家 › 专栏 › 技术社区 › lpradhap

在NgbTooltip内容中包含Hyperlink(目标为空)属性

ng-bootstrap angular javascript

0

lpradhap · 技术社区 · 8 年前

我对NgbTooltip有要求,

工具提示应允许包含带有“\u 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>

上面的代码通过显示超链接打开工具提示。但当我单击超链接时,它会隐藏工具提示,而不是打开一个新窗口。

斯塔克布利茨: https://stackblitz.com/edit/angular-viipeo-dqjmfh?file=app/tooltip-triggers.html

如果有人能帮忙的话,谢谢

2 回复 | 直到 7 年前

1

lpradhap 7 年前

修正了,如果有人感兴趣,下面是解决方案

.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);
}

2

0

Chellappan à®µ 8 年前

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

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

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