Question

好的，我的组件中有一个按钮列表，＆＃39; app-figures-list＆＃39;

<div *ngFor='let figure of figures'>
  <button (click)='figureClick(figure)'>{{ figure.figureName }}</button>
</div>

<div *ngIf=‘figureToShowDetails’ id=‘figureTooltip’>
    <app-figure-tooltip></app-figure-tooltip>
</div>

看起来像这样：

List O' Buttons

我希望的行为是点击按钮（或悬停，或任何其他事件）并使用“数字提示”＆＃39; div，包含在它旁边。像这样......

Button With Component Appearing Next To It

我的第一个想法是尽可能简单地构建它：

使用适当的输入输出属性连接app-figures-list和app-figure-tooltip，在本例中为'figureToShowDetails'。在事件上分配它们。
获取调用元素的位置，在本例中为按钮。
将包含div的位置更改为调用元素位置附近。包含的div将具有适当的z-index值。

为此，我尝试了几种不同风格的ElementRef，Renderer，Renderer2。我不会在这里概述所有这些，除非说它们不起作用。

最重要的是，我有一种直觉，即我仍然陷入了反对Angular精神的DOM操作的心理模型中。

在这种情况下，正确的方法是什么？

Answer 1

一个简单的解决方案是为每个按钮添加一个'tooltip'元素，如下所示：

"Error in prFpConvertMultidimArray(mean) :
  Sorry did not manage to correctly identify the upper/lower boundaries from the input matrix”

在你的控制器中：

<div *ngFor='let figure of figures'>
  <button (click)='showTooltipForFigure(figure)'>{{ figure.figureName }}</button>
  <app-figure-tooltip *ngIf="visibleTooltipforFigure===figure">Hello!</app-figure-tooltip>
</div>

拥有自己的风格。这里的工具提示位于靠近按钮的位置，您可以添加position：absolute并使用边距移动它们。

Angular 5.1中的工具提示

1 个答案: