如何根据Observable值启用/禁用KeyboardEvent监听？

问题描述 #

作为Angular新手，在使用Observable时遇到动态控制键盘事件监听的需求：需要根据从Store获取的Observable变量isDisabled$的值，启用或禁用键盘事件监听。当前代码直接订阅了fromEvent，导致无法根据状态切换监听，且取消订阅时会影响其他订阅逻辑。

现有代码如下：

...

isDisabled$: Observable<boolean> = this.store.select(selectIsDisabled);

private subscriptions = new Subscription();

constructor(
  private store: Store<IStore>
) {
  this.onKeyboardEvent();
}

...
// this.subscriptions 还用于其他函数
...

private onKeyboardEvent(): void {
  let keys: string[] = [];
    this.subscriptions.add(
      fromEvent<KeyboardEvent>(document, 'keydown').pipe(
        filter(key => key.repeat === false),
        map(key => key.code)
      ).subscribe(keyCode => {
        if (!keys.includes(keyCode)) {
          keys.push(keyCode);
        }

        // 此处为按键逻辑处理...

      })
    );
}

解决方案 #

你可以通过RxJS的操作符实现状态与键盘事件的联动，同时避免影响其他订阅，以下提供两种常用方案：

方案一：使用switchMap动态切换订阅 #

这种方式会根据isDisabled$的状态，完全创建或取消键盘事件的订阅，适合需要彻底停止监听的场景：

import { EMPTY, Subject, fromEvent } from 'rxjs';
import { switchMap, takeUntil, filter, map } from 'rxjs/operators';

// ...

isDisabled$: Observable<boolean> = this.store.select(selectIsDisabled);
private destroy$ = new Subject<void>(); // 组件销毁时清理订阅

constructor(private store: Store<IStore>) {
  this.setupKeyboardListener();
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

private setupKeyboardListener(): void {
  let keys: string[] = [];

  this.isDisabled$.pipe(
    switchMap(isDisabled => {
      // 禁用时返回空流，停止监听
      if (isDisabled) {
        return EMPTY;
      }
      // 启用时返回键盘事件流
      return fromEvent<KeyboardEvent>(document, 'keydown').pipe(
        filter(key => key.repeat === false),
        map(key => key.code)
      );
    }),
    takeUntil(this.destroy$) // 组件销毁自动清理
  ).subscribe(keyCode => {
    if (!keys.includes(keyCode)) {
      keys.push(keyCode);
    }
    // 按键逻辑处理...
  });
}

说明：

• switchMap会在isDisabled$状态变化时，自动取消之前的键盘订阅，重新创建新的订阅（或空流）。
• destroy$用于组件销毁时统一清理订阅，避免内存泄漏，且不会影响你原有的subscriptions变量管理的其他订阅。

方案二：使用withLatestFrom过滤事件 #

这种方式会保持键盘事件的订阅，但根据isDisabled$的状态过滤掉不需要处理的事件，适合需要保留监听但暂时不执行逻辑的场景：

import { Subject, fromEvent } from 'rxjs';
import { withLatestFrom, takeUntil, filter, map } from 'rxjs/operators';

// ...

isDisabled$: Observable<boolean> = this.store.select(selectIsDisabled);
private destroy$ = new Subject<void>();

constructor(private store: Store<IStore>) {
  this.setupKeyboardListener();
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

private setupKeyboardListener(): void {
  let keys: string[] = [];

  fromEvent<KeyboardEvent>(document, 'keydown').pipe(
    filter(key => key.repeat === false),
    withLatestFrom(this.isDisabled$), // 获取最新的禁用状态
    filter(([_, isDisabled]) => !isDisabled), // 仅当不禁用时继续处理
    map(([key, _]) => key.code),
    takeUntil(this.destroy$)
  ).subscribe(keyCode => {
    if (!keys.includes(keyCode)) {
      keys.push(keyCode);
    }
    // 按键逻辑处理...
  });
}

说明：

• withLatestFrom会将键盘事件与当前最新的isDisabled$值组合，后续通过filter只保留允许处理的事件。
• 这种方式无需反复订阅/取消键盘事件，仅过滤掉不符合条件的事件，逻辑更简洁。

内容的提问来源于stack exchange，提问作者Mahdi N