Angular2 регистрирует наблюдаемый обработчик событий по нескольким элементам в queryList

Question

У меня есть набор элементов, к которым я хотел бы зарегистрировать один обработчик событий. Я пытался зарегистрировать обработчик событий для каждого элемента в шаблоне, как показано ниже, хотя производительность не является адекватной, и я скучаю горсть этих событий, когда длина 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

Как бы я создал наблюдаемом событие, для каждого элемента в cells?

Answer 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>