如何订阅组件中的全局事件(例如按键)

Question

目前,我有一个建议,菜单组件,当相应的事件发生时,我增加了相应的变量(pressedUp,pressedDown,pressedEnter使用在父组件)suggestion-menu在其模板.

<suggestion-menu             
  [pressedUp]="pressedUp" 
  [pressedDown]="pressedDown" 
  [pressedEnter]="pressedEnter" 
  [query]="someQuery" 
  (onSuggestionClicked)="doSomething($event)">
</suggestion-menu>

然后在建议菜单组件中我用这样的东西检测到变化:

ngOnChanges(inputChanges) {
    if (inputChanges.pressedUp) {
        //do Something
    }

    if (inputChanges.pressDown) {
        //do Something
    }

    if (inputChanges.pressedEnter) {
        //do Something
    }
}

这可以用更好,更少hacky和更多面向事件的方式来完成吗？我希望通过建议菜单组件监听窗口中发生的所有关键事件.然后,如果它是重要的东西(例如向上,向下或输入按下),它将需要自己处理它.

Answer 1

您应该使用HostListener装饰器:https://angular.io/docs/ts/latest/api/core/index/HostListener-interface.html

import {Component, NgModule, HostListener} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }

  @HostListener('window:keyup', ['$event'])
  onKeyup(event: any) {
    console.log('keyup..', event);
  }

  @HostListener('window:keyup.enter', ['$event', 'undefined'])
  @HostListener('window:click', ['undefined', '$event'])
  onEnterOrClick(enterEvent, mouseEvent) {
    if (enterEvent) {
      console.log('enter..');
    }
    if (mouseEvent) {
      console.log('click..');
    }
  }

  @HostListener('window:keyup.arrowUp')
  onarrowUp() {
    console.log('arrowUp..');
  }

  @HostListener('window:keyup.arrowDown')
  onarrowDown() {
    console.log('arrowDown..');
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

https://plnkr.co/edit/gx49kaDYFvBVlHo18bru?p=preview