角度：多くのコンポーネントがキーイベントをリッスンします - リファクタリング？

Question

私は私のプロジェクトで重複したコードを参照してください、私はこの場合、キーイベント

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

に耳を傾ける私の角度成分のカップルで、それには、鍵が1つだけですが、私はとにかくもっとすぎ

でそれらを持っていますここに。だから、これは受け入れられるのか、それとも私はこれをリファクタリングすべきですか？もしそうなら、どのような方法が好ましいでしょうか？

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

。