Question

我正在使用ng5创建表单生成器。基本上，我发送它JSON并生成表单。

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

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

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

Answer 1

在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});
});

Answer 2

在Angular事件中绑定到HTML元素。 FormControl跟踪单个表单控件FormControl official docs的值和验证状态。

如果要定义点击HTML元素等事件，您应该这样做：

<input (click)="myFuncForClick()" ... />

为了以编程方式配置HTML元素（例如使用json，对象或其他），你需要做一些比较复杂的事情，比如创建动态组件，但我不确定它是否值得。

动态地将事件附加到输入

2 个答案: