angular – 将事件动态附加到输入

发布时间：2020-12-17 07:16:34 所属栏目：安全来源：网络整理

导读：我正在ng5中创建一个表单生成器.基本上,我发送它 JSON,它生成表单. 我需要一种方法将事件动态附加到FormControl.我将以下JSON传递给它： { events: { click: 'functionNameHere',dblclick: 'functionNameHere',so on .... }} 如何将此处传递的任何事件附加到

我正在ng5中创建一个表单生成器.基本上,我发送它 JSON,它生成表单.

我需要一种方法将事件动态附加到FormControl.我将以下JSON传递给它：

{
  events: {
     click: 'functionNameHere',dblclick: 'functionNameHere',so on ....
  }
}

如何将此处传递的任何事件附加到我的控件？

解决方法

在ng5中,动态连接侦听器的最佳方式是通过 Renderer2的方式.

let simple = this.renderer.listen(yourElement,yourEvent,(evt) => {
  console.log(evt);
});

你可以参考Eric Martinez dynamically adding listeners in angular给出的答案

最好的方法是为[handleEventInputs]等表单元素创建一个指令,并将事件数据传递给它.

使用渲染器仅侦听那些元素的事件
使用ElementRef.

在指令中创建一个事件发射器,将事件数据和事件类型一起发送回表单生成器组件.

你的组件：

<input type="text" [handleEventInputs]="events" (eventData)="myFunction($event)"/>

你的指令：

@Input('handleEventInputs') eventObject = {};
@Output() eventData = new EventEmitter<{type: string,event: Event}>();

this.renderer.listen(this.element.nativeElement,'your-event',(event) => {
  this.eventData.emit({type: 'your-event',event});
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!