queryList内の複数のアイテムのAngular2レジスタのobservableイベントハンドラ

Question

私は単一のイベントハンドラを登録したい要素のコレクションを持っています。パフォーマンスが十分ではないとmyLabelsの長さが大きい場合、私は.html

に（> 1000）

をこれらのイベントの一握りを逃すが、私は、以下のようなテンプレート内の各要素にイベントハンドラを登録しようとしました.component.ts

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

で

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

代わりに、私は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()で、私は私がcellsの各要素のイベントの観測を設定します各nativeElement

QueryList.toArray()[n].nativeElementのようなどのようにアクセスすることができます配列を取得しますか？

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>