如何从`fromEvent`方法获取最后一个事件

Question

我正在尝试使用 rxjs 捕捉来自 keyup 的最后一个事件，但一直在获取一堆控制台。

这是我的角度指令：

import { Directive, AfterContentChecked, ElementRef, HostListener } from '@angular/core';
import { fromEvent, merge, Observable } from 'rxjs';
import { distinctUntilChanged, debounceTime, last, map } from 'rxjs/operators';

@Directive({
  selector: '[appFocuser]'
})
export class FocuserDirective implements AfterContentChecked {
  focusableArray = [];
  parent = null;
  count = 0;
  currentFocus: HTMLElement;
  constructor(private el: ElementRef) {}

  ngAfterContentChecked() {
    this.parent = this.el.nativeElement;
    this.focusableArray = Array.from(this.parent.querySelectorAll(`[data-focus=true]`));
    this.currentFocus = this.focusableArray[0] as HTMLElement;
    if (this.currentFocus) {
      this.currentFocus.focus();
      this.count++;
    }

    this.eventHandler();
  }

  eventHandler() {
    const events = fromEvent(this.parent, 'keyup')
      .pipe(debounceTime(100))
      .pipe(distinctUntilChanged());
    events.pipe().subscribe(console.log); //each time consoles 7,8
  }
  //
}

处理这个问题的正确方法是什么？

Live Demo

Answer 1

如果你只想要最后一个事件，你可以试试最后一个运算符：

eventHandler() {
    const events = fromEvent(this.parent, 'keyup')
      .pipe(
       debounceTime(100),
       distinctUntilChanged(),
       last());

    events.pipe().subscribe(console.log);
  }

如果你想参加最后 2 个活动，你可以试试这个：

eventHandler() {
    const events = fromEvent(this.parent, 'keyup')
      .pipe(
       debounceTime(100),
       distinctUntilChanged(),
       takeLast(2));

    events.pipe().subscribe(console.log);
  }