时间戳

首页 > 解决方案 > Angular：检测页面（组件）上每个事件的更改

javascript - Angular：检测页面（组件）上每个事件的更改

问题描述

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

<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.

标签： javascripthtmlangularrecursiononchange

解决方案

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

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

推荐阅读