Typescriptでhtmlタグを動的に追加（入力）

Question

動的に生成されるhtmlがありますが、直接変更することはできません。

このhtmlには、クラスが指定された（idなし）と他の多くの属性を持つ<input class="MyInputClass">があります。私は何かがこの入力に書き込まれたときに何かをするように（このテキストはテキストです）、この入力を処理したいと思います。

私は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()" /> 

を書くときあなたは実際に私は、この入力は、入力イベント

に何かをしたいしかし、あなたが実際に

を伝える

を教えていません

私は欲しいです入力イベントに何かを加えるイベントハンドラを作成するための角度。

これは、動的に生成されたHTMLは、角度機能を持つ能力を持たないことを意味します。

しかし、あなたが何ができるか、あなたはngOnDestroy機能に破壊することを、ウィンドウ関数を作成し、ngOnInit機能で、あなたのコンポーネントです。あなたの動的に生成されたHTMLで今、この

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

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

よう

何か。あなたは簡単に行うことができます

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