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

这允许您为事件设置一次侦听器，然后将其筛选到适当的按键。公共方法返回可以过滤特定键或多个键的observables，而无需设置新的observable。然后在你的组件，你会使用这样的：

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

这可以让你建立侦听器只一次，然后在你的组件时，你想要的事件发生时你可以采取适当的行动。