Angular：许多组件都会监​​听关键事件 - 重构？

Question

在我的几个角度组件中，我监听关键事件

@HostListener('window:keydown', ['$event']) keyInput(event: KeyboardEvent) {
   if (this.isActive) {
      if (event.keyCode === 27) {
         // do something
      }
   }
 }

在这种情况下，它只是一把钥匙，但我也有更多钥匙

不管怎样，我在我的项目中看到了重复的代码。那么，这是可以接受的还是我应该重构它？如果是这样，首选方式是什么？

Answer 1

我将创建一个服务，当事件发生时其他组件可以订阅该服务。例如：

@Injectable()
public class KeyEventService {
    private keydown$: Observable;

    constructor() {
        this.keydown$ = Observable.fromEvent(window, "keydown");
    }

    public getEscapeKeyListener() {
        return this.keydown$.filter((event: KeyboardEvent) => event.keyCode === 27);
    }
}

这允许您为事件设置一次监听器，然后将其过滤到适当的按键。公共方法返回根据特定键或多个键进行过滤的可观察量，而无需设置新的可观察量。然后在你的组件中你可以像这样使用它：

@Component({})
public class MyComponent implements OnInit, OnDestroy {
    private keyListenerSub: Subscription;

    constructor(private keyEventSvc: KeyEventService) { }

    ngOnInit() {
        this.keyListenerSub = this.keyEventSvc.getEscapeKeyListener().subscribe(() => {
            /* respond to keypress */
        });
    }

    ngOnDestroy() {
        this.keyListenerSub.unsubscribe();
    }
}

这允许您仅设置侦听器一次，然后在您想要的事件发生时，您可以在组件中采取适当的操作。