Angular：检测页面组件上每个事件的变化

如何解决Angular：检测页面组件上每个事件的变化

我正在 Angular 10 中开发一个应用程序。我创建了一个递归组件，它显示了包含不同输入字段（复选框、单选按钮、文本输入等）的动态“表单”。这是 my-component 的 HTML 代码的一个小例子：

<select [(ngModel)]="valueChosen" name="field" id="field">
        <option *ngFor="let data of datas" [ngValue]="data.code">{{data.text}}</option>

        <div>
              <my-component [datas] = "data">
              </my-component>    
        </div>
</select>

真正的代码要长得多，但我希望给出一个想法：组件本身是通过在输入中传递原始数据的子部分来使用的。这意味着由于它不是“固定形式”（但它是在每次使用时动态创建的），因此我无法将每个输入关联到 component.ts 文件中的特定元素。我想要一个系统，它允许我检测（使用类似于 AngularJS 中的手表的东西）用户以这种动态形式制作的每一次单击/检查/插入文本。不幸的是，我无法使用反应式表单，因为它们假定 component.ts 和 component.html 之间存在链接。

解决方法

如果是动态表单，则使用 Angular 的 Reactive 表单并利用 FormArray 动态添加和删除表单控件。然后订阅表单的 valueChanges 以获取数据更改事件。这也将允许您根据需要添加或清除表单验证器。

此外，您可以在 Form 上为所有其他事件添加一个带有 HostListeners 的指令[事件冒泡将帮助您]，例如触摸、点击等。