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();
}
}

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