키보드 이벤트가 contenteditable 내의 구성 요소에 바인딩되었습니다.

div [contenteditable = true] 내부의 구성 요소에서 키보드 이벤트를 수신하려고합니다. 왜 작동하지 않는거야?키보드 이벤트가 contenteditable 내의 구성 요소에 바인딩되었습니다.

는 http://plnkr.co/edit/Tjmihqc1r5UrS3XJ3QQ0?p=preview가

템플릿 쿵 - 일

를 keyDown,의 keyup는, 키 누름 -

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

클릭 작동하지

UPDATE : 나는 문제가되지 않는 것을 발견 각도 2에 적용하십시오. 관련 내용 관련 D Keypress event on nested content editable (jQuery)

출처

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

이 시도 : 당신의 component.ts

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

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

내부

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

대신 Get User input from $event

Plunkr Example

출처

2017-02-28 04:11:44

에 나타났습니다. 아무도 작동하지 않습니다 –

@ ШлыковСергей 방금 내 대답 plenkr 예제를 추가했습니다. –

그게 내가하려고 하는게 아니야. 목표는 contenteditable의 ** child ** 구성 요소에 바인딩하는 것입니다. 만족할만한 자체가 아닙니다. –