在 Typescript 中动态添加（输入）到 html 标签

【问题标题】：Add (input) to html tag dynamically in Typescript在 Typescript 中动态添加（输入）到 html 标签
【发布时间】：2018-05-26 01:48:38
【问题描述】：

我有一些动态生成的 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

是否可以注入这样的处理程序？

【问题讨论】：

标签： html angular typescript events

【解决方案1】：

不，你不能。

当你写作时

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

你实际上并没有告诉

我希望这个输入对输入事件产生影响

但你实际上告诉了

我希望 Angular 创建一个事件处理程序，该处理程序将对输入事件进行处理。

这意味着，动态生成的 HTML 不具备任何 Angular 特性的能力。

但是，你可以做的是在你的组件中，在ngOnInit 函数中，创建窗口函数，你将在你的ngOnDestroy 函数中销毁。

类似的东西

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

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

现在在您动态生成的 HTML 中；你可以简单地做

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

【讨论】：