Блог

Главная - Вопросы по программированию - Angular2 регистрирует наблюдаемый обработчик событий для нескольких элементов в списке запросов

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

#angular #rxjs #observable #angular2-observables

#angular #rxjs #наблюдаемый #angular2-наблюдаемые

Вопрос:

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

Ответ №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>

Комментарии:

1. Как бы мне связать событие с конкретной ячейкой?

2. Я думаю, event.target что он должен содержать элемент, который вы ищете (или любой вложенный элемент внутри этого элемента). В конечном итоге вы можете найти ячейку, проверив ее родителей. developer.mozilla.org/en/docs/Web/Events/mouseover

3. Как уже упоминалось, event.target (или это currentTarget) предоставит вам элемент. Однако обратите внимание, что ваш исходный обработчик также не получил элемент, только событие. Если вам действительно нужно получить доступ к данным элемента (прикрепленный компонент), вы можете захотеть заглянуть в exportAs