鍵盤事件綁定在組件內contenteditable

我嘗試偵聽div [contenteditable = true]內的組件上的鍵盤事件。爲什麼它不起作用？鍵盤事件綁定在組件內contenteditable

花掉http://plnkr.co/edit/Tjmihqc1r5UrS3XJ3QQ0?p=preview

模板：

<div contenteditable="true"> <h2 (keydown)="log($event)" (keyup)="log($event)" (keypress)="log($event)" (click)="log($event)">Hello {{name}}</h2> </div>

點擊 - 工作

的keydown，KEYUP，按鍵 - 不行

更新：我發現，問題不適用於角度2 其可理解的相關d Keypress event on nested content editable (jQuery)

來源

2017-02-28 Шлыков Сергей

試試這個：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div contenteditable="true" (keyup)="onKey($event)"> 
    <h2>Hello {{values}}</h2> 
    </div> 
    `, 
})

您component.ts

export class App { 
    name:string; 
    log = []; 
    values = ''; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    onKey(event: any) { 
    console.log(event); 
    this.values += event.key + ' | '; 
    } 
}

內根據需要使用的，而不是KEYDOWN Get User input from $event

Plunkr Example

來源

2017-02-28 04:11:44

注意到有什麼區別：在我的情況KEYUP，的keydown，按鍵。這一切都行不通 –

@ШлыковСергей剛剛給我的答案增加了一個plunkr的例子。 –

它不是我想要做的。目標是綁定到** contenteditable的**子組件。不是爲了自我滿足。 –