Angular 角度2如何相对于另一个图元定位图元

在Angular 2中，我需要确定一个元素相对于另一个元素的绝对位置。在jQuery中，这可以使用jQueryUI.position（）完成

我试图创建Angular 2指令，但找不到引用目标元素（可能在页面上的任何位置）以获取top/left/width/height值的方法

另外，我的理解是在Angular 2中应该避免DOM操作。不使用nativeElement是否可以实现此职位功能

目标是能够在任何页面的顶部创建覆盖，帮助/提示文本可以放置在元素的顶部。请注意，该页面是响应性的。这是一个理想效果的示例

---

看看这个小玩意儿：

您应该做的是专门为覆盖创建一个组件，然后将其添加到您希望显示消息的任何组件中：

@组件({
选择器：“我的工具提示”，
模板：{{Message}}`，
样式：['span{position:absolute；}']
})
导出类工具提示{
@输入（）
公共消息：string=“”；
}

我将此作为一个单独的答案添加，因为它与原始答案有所不同，我认为这两个答案可能对将来看到这一点的任何人都有用

艾杜斯·马修，为这种随意的状态道歉。有点像是拼凑在一起的

关键是我创建了一个可注入的

overlay

类，可以在任何我们想要打开/关闭overlay的地方使用，或者需要在应用程序中检查overlay的状态

这允许我们使用工具提示上的

[class.my class]

属性样式添加条件样式以显示工具提示

@Injectable（）
导出类覆盖{
public IsVisible:boolean=false；
公共切换（）：void{
this.IsVisible=！this.IsVisible；
}
}

这是一个需要更多工作的粗略实现！注意，这是在离子2环境中实现的

概述

创建包含覆盖和工具提示/提示的“简介”组件。我选择将此组件作为Ionic 2 popover打开（Ionic将自动添加覆盖）。将相对元素作为参数传递给引入组件。创建一个指令，将一个元素相对于另一个元素（在页面上）进行绝对定位。撒上scss

重要提示：在我的例子中，页面上有一些图像需要时间才能加载。在我等待图像加载之前，位置数据不正确。这在jQuery中是相同的，可以通过在中包装命令来解决：

$(window).load(function() {
});

现在，我有一个计时器，它只会延迟打开介绍页面

我的位置。ts

此指令设置一个元素相对于另一个参考元素（在页面上）的顶部/左侧

introduction.html

向简介页面添加工具提示/提示。添加my position指令并将相对元素作为参数传递。添加其他位置参数（根据需要）

home.html

为引用元素添加名称（必须是驼峰大小写），例如

将引用元素作为参数传递到简介页面

let popover = this.popoverController.create(IntroductionPage, {
    'hintRef1': this.hintRef1,
    'hintRef2': this.hintRef2,
    'hintRef3': this.hintRef3
    }, { cssClass: 'introduction' });

---

一个组件是否可以是另一个组件的子组件，并通过CSS进行定位？应该避免DOM操纵，是的。我不确定。我更新了这个问题：目标是能够在任何页面的顶部创建一个覆盖，帮助/提示文本可以放置在元素的顶部。答案是否足够让您继续？这种方法是有意义的。工具提示html只是html页面的一部分。但是，我看不到使用这种方法并实现叠加效果的方法。我已经更新了问题，添加了一个示例图片。啊，我明白了。在这种情况下，我将使用tooltip组件上的条件类来实现它。当激活时，它将获得一个样式，该样式为它提供了一个高z索引，并使其

显示：block

。未应用任何类时隐藏。这有意义吗？当我回到电脑前，我会试着写一个例子。我喜欢直接向html元素添加工具提示的想法。这使它们易于定位。但是，我的理解是，要创建暗显效果，工具提示需要位于同一容器元素中。容器元素将用css不透明度覆盖整个页面，例如不透明度：0.5。但很明显，这会导致同样的问题——如何相对于“任何”另一个元素定位一个元素。我添加了另一个答案，而不是更改这个答案。我希望它看起来更接近你想要做的事情：）有助于考虑这个替代的实现。由于我们复杂的设计，尝试对齐元素仍然过于复杂。在jQuery中这样做很简单，而且，我页面上的许多元素都位于相对容器中。这会导致工具提示无法正确显示在覆盖的顶部。

<div class="hint" [my-position]="hintRef1" my="left top" at="left top" offset="0 105">This is an app hint!</div>

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private viewController: ViewController
) {
    // Get elements (passed as parameters from page) to use as references (to position hints).
    this.hintRef1 = navParams.get('hintRef1');
    this.hintRef2 = navParams.get('hintRef2');
    this.hintRef3 = navParams.get('hintRef3');
}

<div #hintRef1 ...

// Pass position reference elements to introduction popover.
@ViewChild('hintRef1') hintRef1;
@ViewChild('hintRef2') hintRef2;
@ViewChild('hintRef3') hintRef3;

let popover = this.popoverController.create(IntroductionPage, {
    'hintRef1': this.hintRef1,
    'hintRef2': this.hintRef2,
    'hintRef3': this.hintRef3
    }, { cssClass: 'introduction' });