将上下文传递给 ngx bootstrap 的工具提示答案

【问题标题】：Passing context to tooltip of ngx bootstrap将上下文传递给 ngx bootstrap 的工具提示
【发布时间】：2019-12-27 21:37:07
【问题描述】：

我正在使用 ngx-bootstrap 中的工具提示，并希望将数据传递给工具提示的 ng-template。该文档提供了 [tooltipContext]，但它似乎没有工作。我提供了一个代码 sn-p。

HTML：

<ng-template #tooltipTmpl let-view="view">
    <div class="tooltip-section">
        <div class="section-title">
            {{ view.dateRangeText }}
        </div>
        <div class="section-text">
            {{ view.data }}
        </div>
    </div>
</ng-template>
<div
    *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl"
    [tooltipContext]="{view: view}"
    containerClass="white-tool-tip"
    placement="top"
                    >
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

参考号：https://valor-software.com/ngx-bootstrap/#/tooltip

【问题讨论】：

工具提示是纯文本而不是 HTML。使用 popover 并给它一个自定义类，让它看起来像你想用工具提示实现的任何东西。

标签： javascript html angular tooltip ngx-bootstrap

【解决方案1】：

我在我的项目中使用了 bootstrap popover，所以建议使用 popover。

此外，在 GitHub 上创建了一个问题，但用户最终使用了 popover - https://github.com/valor-software/ngx-bootstrap/issues/4775

【讨论】：

? 这是有关此问题的唯一来源，但我似乎不推荐使用 tooltipContext ??
@MuhammedAlbarmavi。您的解决方案是一个很好的建议。感谢分享示例代码。
@Yiu Pang Chan - 请参阅下面发布的示例

【解决方案2】：

我也遇到了同样的问题，到目前为止，我已经检查了源代码，tooltipContext 标记为已弃用，您可以像这样进行一轮工作

你仍然可以访问 ng-template 中的 view 属性

<button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl">
  Show me tooltip with html {{ view.title }}
</button>

<ng-template #tooltipTmpl>
    <h4>
        {{ view.dateRangeText }}
    </h4>
    <div>
        <i>
      {{ view.data }}
   </i>
    </div>
</ng-template>

demo ??

更新了??

如果您想将我的解决方案与视图数组一起使用，您只需将 ng-template 移动到 ngFor 的主体。

模板

<ng-container *ngFor=" let view of views">
    <button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl">
  Show me tooltip with html {{ view.title }}
</button>
    <ng-template #tooltipTmpl>
        <h4>
            {{ view.dateRangeText }}
        </h4>
        <div>
            <i>
      {{ view.data }}
   </i>
        </div>
    </ng-template>
    <br>
    <br>
</ng-container>

demo ??

【讨论】：

这是一个工具提示的解决方案。它不能扩展到需要工具提示的按钮数组，因为我必须跟踪用户悬停在哪个工具提示上。

【解决方案3】：

@Yiu Pang Chan - 您可以通过以下方法获得视图数组。

在 app.component.html 文件中

<div *ngFor="let view of views; let i = index">
   <button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
      [tooltip]="tooltipTmpl" on-mouseover="setTooltipData(view)" >
     Show me tooltip with html {{ view.title }}
   </button>
</div>

<ng-template #tooltipTmpl>
    <h4>
        {{ viewDateRangeText }}
    </h4>
    <div>
        <i>
      {{ viewData }}
   </i>
    </div>
</ng-template>

在 app.component.ts 文件中

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
public viewDateRangeText: string;
public viewData: any;

  setTooltipData(view: any){
    viewDateRangeText = view.dateRangeText;
    viewData = view.data;
  }
}

【讨论】：

干得好?，这里的所有解决方案都只是解决这个问题的方法，但我认为我们必须选择一个工具提示看起来已弃用的新组件

【解决方案4】：

@rkp9 感谢您的代码。它确实解决了这个问题，但它在 TS 代码中添加了 viewDateRangeText、viewData 和 setTooltipData。

我采用了@MuhammedAlbarmavi 建议的方法，因为它没有额外的变量和函数。 Github 上的评论没有我们需要让 popover 像工具提示一样的配置。我在下面有它。

<ng-template #tooltipTmpl let-view="view">
    <div class="tooltip-section">
        <div class="section-title">
            {{ view.dateRangeText }}
        </div>
        <div class="section-text">
            {{ view.data }}
        </div>
    </div>
</ng-template>
<div
   [popoverContext]="{ view: view }"
   [popover]="tooltipTmpl"
   triggers="mouseenter:mouseleave"
   placement="top"
>
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

【讨论】：