1

我有一组元素，我想在其中注册一个事件处理程序。我尝试在如下模板中的每个元素上注册事件处理程序，尽管性能不够，并且当长度myLabels很大（> 1000）时我会错过一些这些事件

在里面.html

<template ngFor let-row [ngForOf]=myLabels>
  <div #cell (mouseenter)=onMouseEnter($event)>...</div>
</template>

在里面.component.ts

...
OnMouseEnter(event) {
  console.log('mouse entered')
}

相反，我想将这些事件注册为Observable流。

在我的.component.ts;

export class MyComponent {
  @ViewChildren('cell') cells: ElementRef;
  public mouseMoves$: Observable<MouseEvent>;
  ...
  onFrameLoad(): void {
    this.mouseMoves$ = Observable.fromEvent(this.cells.nativeElement, 'mousemove');
  }
}

虽然这不起作用，因为this.cells它是一个QueryList. 使用QueryList.toArray()，我得到一个数组，我可以在其中访问每个nativeElement喜欢QueryList.toArray()[n].nativeElement

我将如何为中的每个元素设置一个事件的 Observable cells？

4

1 回答 1

1

由于您的模板仅包含单元格，为什么不在模板上移动鼠标：

<template ngFor let-row [ngForOf]=myLabels (mouseenter)=onMouseEnter($event)>
  <div #cell>...</div>
</template>

或者，如果模板不接受事件侦听器，请将其包装在 div 中：

<div (mouseenter)=onMouseEnter($event)>
  <template ngFor let-row [ngForOf]=myLabels>
    <div #cell>...</div>
  </template>
</div>
于 2016-10-21T08:03:40.013 回答