Как вы получаете Observable события?

0

Мне интересно, как вы получаете Наблюдаемое событие в Angular 2?

Например, я хочу подписаться на событие click, но только после двух кликов? Можно ли получить объекты Observable of MouseClick?

Скажем, хочу ли я фильтровать по button или ctrlKey - или Наблюдаемое из KeyboardEvent и фильтровать key\keyCode - Или любой возможный будущий сценарий

Я прочитал http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html, но свойство valueChanges - Observable<string>

Я также видел на https://github.com/angular/angular/issues/5489, что можно сделать что-то вроде:

this.clickStream = new Subject();
...
<button (click)="clickStream.next($event)">Click Me</button>

Является ли метод Subject выше правильного пути? Я не уверен.

У меня нет большого опыта работы с Angular 2 или RxJS, но меня интересует и то и другое, и я исследую их с идеей использования их в будущих проектах

редактировать

Здесь мой Plunker с простым приложением для использования кликов http://plnkr.co/edit/u1A7ve2fAYigjwaZ0x1v?p=preview

Теги:
rxjs

1 ответ

1
Лучший ответ

Observable имеет оператор fromEvent, но для его использования вам понадобится ссылка на собственный элемент. Способ получить это - использовать viewChild/contentChild, чтобы получить элементRef.

Затем вы можете привязать его к клику так:

var clickStream = Observable.fromEvent(btnRef.nativeElement, 'click');

Если я правильно понял фильтрующую вещь, вы хотите, чтобы поток излучал только после того, как нажатие было нажато дважды, или, если быть точнее, один раз за каждые два щелчка, для этого используйте оператор bufferWithCount:

var triggerFor2Clicks = clickStream.bufferWithCount(2);

Это будет генерировать массив из 2-х событий за раз, поэтому ваш обработчик может быть:

triggerFor2Clicks.subscribe(() => my2ClicksHandler);

Обратите внимание, что аргументы пусты, обозначаются как "()", так как вы не очень заботитесь о событиях, просто к тому факту, что они были 2 из них.

Поделиться
  • 0
    Спасибо, что очень помогает! В два клика был пример, который коллега спросил меня о том, как изменить логику. Мне действительно было интересно, можно ли получить объекты событий Observable of MouseClick, скажем, хочу ли я фильтровать по button или ctrlKey - или Observable of KeyboardEvent и фильтровать по key \ keyCode
  • 0
    Я также только что видел ИСПОЛЬЗОВАНИЕ С ОСТОРОЖНОМ в API Angular 2 для ElementRef angular.io/docs/ts/latest/api/core/index/ElementRef-class.html
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню