如何訂閱組件中的全局事件（例如按鍵）

目前我有一個建議菜單組件，當相應事件發生時，我使用suggestion-menu將相應變量（pressedUp,pressedDown,pressedEnter）增加到父組件中在其模板中。如何訂閱組件中的全局事件（例如按鍵）

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

然後在建議菜單分量I檢測與類似的東西的變化：

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

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

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

可這在一個更好的，少哈克多面向事件的方式進行？我希望窗口中發生的所有關鍵事件都能被建議菜單組件收聽。那麼，如果它是重要的東西（例如上，下或按下），它將需要自己處理它。

來源

2016-11-20 Michail Michailidis

* - 父母或孩子？孩子如何決定應該發生什麼？或者你是否只是想通過一個「@輸出」將孩子的所有事件「排出」給父母？ – jonrsharpe

@jonrsharpe抱歉不清楚..我希望窗口中發生的所有關鍵事件都能被子組件（建議菜單）收聽。如果它對於它來說很重要（例如上，下或按下），它將需要自行處理。請讓我知道，如果它仍然不清楚 –

我已經做了謝謝:) –

您應該使用這個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

來源

2016-11-20 09:41:59 mxii

真棒工作！謝謝:)有沒有辦法在同一個'''@ HostListener'''中有多個事件？ –

Yw！當然，你可以爲你的處理函數使用多個裝飾器。看到我更新的答案。 – mxii

很高興聽到:)謝謝！ –

如何訂閱組件中的全局事件（例如按鍵）

回答

相關問題