Angular模板，检查DOM元素是否为特定的ElementRef

Question

我想检入模板，如果循环中的元素是特定的ElementRef

例如：

控制器：

@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
  @ViewChildren(el) elList: QueryList<ElementRef>;

  public element: ElementRef;

  ngAfterViewInit() {
    this.element = this.elList.toArray()[2];
  }
}

模板：

<div #el *ngFor="[...]" [ngClass]="this === element ? 'highlight' : ''"></div>
<div #el *ngFor="[...]" [ngClass]="this === element ? 'highlight' : ''"></div>

当然不起作用，“ this”不是ElementRef。

有没有办法检测到那？

我不想按索引进行检查，因为我可以在模板侧进行多个循环，例如在我的示例中

哦，我正在使用Angular 8：）

谢谢！

Answer 1

对于您的情况，理想的解决方案是您可以为div数组中的每个*ngFor=[....]定义类名，因此可以将其命名为<div #el *ngFor="item of [...]" [ngClass]="item.className ? 'highlight' : ''"></div>

如果绝对要比较元素，则可能要在TypeScript中而不是模板中进行。作为打击代码。

  @ViewChildren('el', {read: ElementRef})
  ele: QueryList<ElementRef>

  constructor(
    private renderer: Renderer2
  ){}

  ngAfterViewInit() {
    /** A mock selectElement */
    const selectElement = this.ele.toArray()[2];

   /** Upate elements everytime elements get changed. */
    this.ele.changes.pipe(
      startWith(this.ele),
      map(elements => elements.toArray()),
    ).subscribe(elements => {
      elements.map((element: ElementRef) => {
        if (element === selectElement) {
          this.renderer.addClass(element.nativeElement, 'highlight');
        }
      })
    });
  }