【问题标题】:Include Hyperlink (with _blank target) property inside NgbTooltip content在 NgbTooltip 内容中包含超链接(带有 _blank 目标)属性
【发布时间】:2019-01-02 10:04:25
【问题描述】:

我对 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>

以上代码通过显示超链接打开工具提示。但是当我单击超链接时,它并没有打开一个新窗口,而是隐藏了工具提示。

stackblitz:https://stackblitz.com/edit/angular-viipeo-dqjmfh?file=app/tooltip-triggers.html

如果有人可以提供帮助,不胜感激

【问题讨论】:

标签: javascript angular ng-bootstrap


【解决方案1】:

已修复,如果有人感兴趣,以下是解决方案

.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】:

    使用 ViewChild 获取元素的引用,然后使用 tooltip 方法关闭

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

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

    【讨论】:

    • hostlistener 适用于组件,但不适用于我所知道的元素。所以在我的页面中,该工具仅在 body mouseleave 时关闭。
    猜你喜欢
    • 1970-01-01
    • 2023-03-17
    • 1970-01-01
    • 1970-01-01
    • 2018-03-15
    • 2014-01-02
    • 2014-03-27
    • 2018-06-12
    • 1970-01-01
    相关资源
    最近更新 更多