将 #element 绑定到使用 *ngFor 创建的元素

Question

我正在使用*ngFor来创建一堆div。我想拿到其中一个并得到它的宽度。

。.html

<div #elReference *ngFor="let el of elements> HEHE </div>

.ts

@ViewChild("elReference") elReference: ElementRef;

显然，您不能将ViewChild与*ngFor一起使用，因为elReference仍然undefined。

你如何获得用*ngFor创建的元素引用？

Answer 1

无法有选择地添加模板变量，但是您可以有选择地添加一个标记，然后按该标记进行过滤：

<div #elReference [attr.foo]="el.x == 'foo' ? true : null" *ngFor="let el of elements"> HEHE </div>

@ViewChildren("elReference") elReference: QueryList<ElementRef>;
ngAfterViewInit() {
  console.log(this.elReference.toArray()
      .filter(r => r.nativeElement.hasAttribute('foo')));
}

Answer 2

指令有一种更复杂但更正确的方法。

<!-- app.component.html -->
<div *ngFor="let el of elements" [id]="el.id"> HEHE </div>

// div-id.directive.ts
import { Directive, Input, ElementRef } from '@angular/core';
@Directive({
  selector: 'div[id]',
})
export class DivIdDirective {
  @Input() id: number;
  constructor(ref: ElementRef<HTMLDivElement>) {
    this.el = ref.nativeElement;
  }
  el: HTMLDivElement;
}

// app.component.ts
export class AppComponent implements AfterViewInit {
  // ...
  @ViewChildren(DivIdDirective) els: QueryList<DivIdDirective>;
  ngAfterViewInit(): void {
    console.log(this.els.map(({id, el}) => ({id, el}));
  }
}

Answer 3

一种简单而优雅的方法是利用 Angular 的组件模型。将迭代元素的内容移动到组件中。

而不是

<div ngFor="let a of aList">
  <div #a>{{a}}</div>
</div>

你会有

<div ngFor="let a of aList">
  <app-a [a]="a"></app-a>
</div>

与应用程序 A 存在

<div #a>{{a}}</div>