Angular2には$ documentと同等のものがあります

Question

Angular2を調べ始め、3つのネストされたコンポーネントを使って基本的な作業を開始しました。しかし、私はどのように文書にkeypressハンドラを追加するのか分からない。

もしそうでなければ、ドキュメントのキー入力を聞いてそれに反応するのですか？ 明確にするには、入力ではなく、文書そのもののキーパーに応答する必要があります。

角1では、私は指令を作成して$ documentを使用します。

$document.on("keydown", function(event) { 

     // if keycode... 
     event.stopPropagation(); 
     event.preventDefault(); 

     scope.$apply(function() {    
     // update scope...   
     }); 

しかし、私はAngular2の解決策をまだ見つけていません。

Answer 1

あなたはこのような何かを行うことができます。

@Component({ 
    host: { 
    '(document:keyup)': '_keyup($event)', 
    '(document:keydown)': '_keydown($event)', 
    }, 
}) 
export class Component { 
    private _keydown(event: KeyboardEvent) { 
    let prevent = [13, 27, 37, 38, 39, 40] 
     .find(no => no === event.keyCode); 
    if (prevent) event.preventDefault(); 
    } 
    private _keyup(event: KeyboardEvent) { 
    if (event.keyCode === 27) this.close(); 
    else if (event.keyCode === 13) ...; 
    else if (event.keyCode === 37) ...; 
    else if (event.keyCode === 38) ...; 
    else if (event.keyCode === 39) ...; 
    else if (event.keyCode === 40) ...; 

    // else console.log(event.keyCode); 
    } 
} 

ところで、角度チームは現時点では、この状況だかわからない、いくつかの興味深いideas about keyboard eventsを、持っていました。それも可能ですit's working、自分自身を試していない:)