如何获取NgFor创建的元素的引用和位置

Question

我有一个组件，使用NgFor来构建一行元素…

<div *ngFor="let item of list">{{item.text}}</div>

我不知道这些元素有多宽，但稍后我需要能够引用一个特定的元素，获得它的left值并移动整个，以便所选的元素与某一点对齐。

我通过将id添加到每个元素来做到这一点…

<div *ngFor="let item of list" [id]="item.id">{{item.text}}</div>

那么我就用标准的getElementById()…

let el:HTMLElement = document.getElementById(someId);
let pos:number = el.offsetLeft;

这工作得很好，但似乎可以用更"Angular2的方式"来完成。所以我的问题是…

这个方法可以吗?如果不是，那么什么是最好的方法来获取NgFor创建的元素的引用，以便我可以获得它们的各种位置和风格属性?

欢呼

Answer 1

在Angular2中，为了获取对特定索引的引用，你需要在ngFor中添加let i = index。现在您将在本地变量

中获得索引号

NgFor提供了几个可以别名到本地变量的导出值:

• index将被设置为每个模板的当前循环迭代上下文。
• first将被设置为一个布尔值，该值指示该项是否是迭代中的第一个。
• last将被设置为一个布尔值，该值指示该项目是否为迭代的最后一个。
• even将被设置为一个布尔值，指示该项是否具有偶索引。
• odd将被设置为一个布尔值，该值表示该项是否存在

在你的例子中，div应该是这样的

<div *ngFor="let item of list ; let i = index">{{item.text}}</div>

希望这对你有帮助。

NgFor支持trackBy选项。trackBy接受一个函数，该函数有两个参数:index和item。如果指定了trackBy， Angular会根据函数的返回值跟踪变化。

详细信息请访问https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Answer 2

我更喜欢使用自定义指令，这将为您工作。

Demo: https://plnkr.co/edit/XO1GjQTejR8MxoagTZR5?p=preview检查浏览器控制台

import { Directive,Input,Outpu,ElementRef,Renderer} from '@angular/core';
@Directive({
  selector:"[getRef]",
  host:{
    '(click)':"show()"
  }
})
export class GetEleDirective{
  constructor(private el:ElementRef){ }
  show(){
    console.log(this.el.nativeElement);
    console.log(this.el.nativeElement.offsetLeft);   
  }
}