Rxjs 绑定 Angular 页面事件

Angular 通过括号()来绑定页面的事件,但是有的时候需要使用 Rxjs 来处理一些事件会更加方便,拖拽,输入框自动提示,websocket 等,这时候就应该把用户每次的输入视为事件流,通过 Rxjs 流式处理数据会比较方便。

原生事件

比如:click, keyup 等这些是 js 原生事件,可以通过 Rxjs 的 fromEvent 来创建。首先标记 element:

  // @ts-ignore
  @ViewChild('pingCode')
  pingCodeInput: ElementRef;

然后在页面初始化的时候创建 Observable 并订阅:

    const pingCodeInput$ = fromEvent<any>(this.pingCodeInput.nativeElement, 'input');
    this.subscription = pingCodeInput$.pipe(
      map(event => event.target.value),
      filter(item => item.length === 6),
      filter(code => /^\d+$/.test(code))
    ).subscribe(result => {
      this.isloading = true;
      this.verifyPingCode(result);
    });

自定义事件

Angular 可以使用 Output 装饰器来定义组件所发出的事件,这时候 fromEvent 就无效了,Rxjs 本身可以通过 BehaviorSubject 来构造一个 Observable 对象。

首先声明一个 Subject :

  public dragSubject = new BehaviorSubject({});

然后在构造函数中订阅并定义相关后续操作逻辑:

  constructor( ) {
    this.dragSubscription = this.dragSubject.pipe(
      debounce(() => interval(1000))
    ).subscribe(data => {
      console.log(data);
    });
  }

在页面中还是使用括号来绑定相关事件,但是绑定的函数由原来的处理业务逻辑变成向 Subject 发送数据:

dragEnd($event: CdkDragEnd) {
    this.dragSubject.next($event);
}

将相关的逻辑移到订阅里面去处理。