Angular 2 如何相对于另一个元素定位一个元素

Question

在 Angular 2 中，我需要相对于另一个元素绝对定位一个元素。在 jQuery 中，这可以使用 jQueryUI .position() https://api.jqueryui.com/1.8/position/ 来完成。

我试图创建一个 Angular 2 指令，但找不到一种方法来引用目标元素(可能位于页面上的任何位置)以获取顶部/左侧/宽度/高度值。

此外，我的理解是在 Angular 2 中应避免 DOM 操作。是否可以在不使用 nativeElement 的情况下实现此位置功能？

目标是能够在帮助/提示文本可以位于元素顶部的任何页面顶部创建叠加层。请注意，该页面是响应式的。这是预期效果的示例。

Answer 1

我将其添加为一个单独的答案，因为它与原始答案做了一些不同的事情，我认为两者都可能对将来看到这个的人有用。

对 this plunker 的随意状态表示歉意，@Aydus-Matthew。它有点被扔在一起。

这个的关键部分是我创建了一个可注入(inject)的 overlay 类，可以在我们想要打开/关闭覆盖的任何地方使用，或者需要检查覆盖的状态应用程序。

这允许我们在工具提示上使用 [class.my-class] 属性样式来添加条件样式以显示工具提示。

@Injectable()
export class Overlay {
  public IsVisible: boolean = false;
  
  public Toggle(): void {
    this.IsVisible = !this.IsVisible;
  }
}

然后像这样在工具提示组件中使用它:

import { Overlay } from './overlay';

@Component({
  selector: 'my-tooltip',
  template: `<span [class.visible]="overlay.IsVisible">{{ Message }}</span>`,
  styles: ['span { position: absolute; display: none; color: white; font-weight: bold } .visible { display: block } '],
})
export class Tooltip {
  @Input()
  public Message: string = "";
  
  constructor (private overlay: Overlay) {  }
}

希望这可以帮助您获得解决问题所需的正确实现:)