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

這可以讓你建立偵聽器只一次，然後在你的組件時，你想要的事件發生時你可以採取適當的行動。