Typescript에서 html 태그를 동적으로 추가 (입력)

Question

동적으로 생성되는 HTML이 있습니다. 직접 수정할 수 없습니다.

이 html은 <input class="MyInputClass">이며 id가없는 클래스와 기타 여러 속성이 지정되어 있습니다. 이 입력 (텍스트)을 처리하여 뭔가가이 입력에 쓰여질 때 (콘솔이라고 쓰자) 뭔가를하고 싶습니다. 나는 HTML이에 액세스 한 경우

나는 이런 식으로 할 것 :

<input type="text" class="form-control (input)="onSearchChange($event.target.value)"> 

public onSearchChange(searchValue : string) { 
    console.log(searchValue); 
} 

출처 : Angular 2 change event on every keypress

이 같은 핸들러를 주입하는 것이 가능한가를?

Answer 1

아니요, 불가능합니다.

당신이

<input type="text" (input)="doSomething()" /> 

을 쓸 때 당신은 실제로

내가이 입력은 입력 이벤트

에 무언가를 만들고 싶어 말하지 마하지만 당신은 실제로

에게

원함 Angular는 입력 이벤트에서 무언가를 만들 이벤트 핸들러를 생성합니다.

동적으로 생성 된 HTML에는 각도 기능이있을 수 없습니다.

하지만, 당신은 무엇을 할 수 있는지의 ngOnInit 기능에, 당신은 당신의 ngOnDestroy 기능에 파괴 할 것이라는 점을, 윈도우 함수를 생성, 구성 요소입니다. 당신의 동적으로 생성 된 HTML에서 지금이

ngOnInit() { 
    window['onXXXInput'] = (value) => { 
    /* do something */ 
    } 
} 

ngOnDestroy() { 
    delete(window['onXXXInput']); 
} 

같은

뭔가; 너는 할 수있어.

<input type="text" oninput="window.onXXXInput(this.value)" />