angular2手动点击特定元素上的点击事件

我试图在元素上编程单击事件（或任何其他事件），换句话说，我想知道angular2中的jQuery .trigger（）方法提供的类似function。

有没有内置的方法来做到这一点？ 如果不是，请build议我该如何做到这一点

考虑下面的代码片段

<form [ngFormModel]="imgUploadFrm" (ngSubmit)="onSubmit(imgUploadFrm)"> <br> <div class="input-field"> <input type="file" id="imgFile" (click)="onChange($event)" > </div> <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button> </form> 

这里当用户点击btnAdd时，它应该触发imgFile上的点击事件

Answer 1

Angular4

代替

  this.renderer.invokeElementMethod( this.fileInput.nativeElement, 'dispatchEvent', [event]); 

使用

  this.fileInput.nativeElement.dispatchEvent(event); 

因为invokeElementMethod将不再是渲染器的一部分。

Angular2

使用带有模板variables的ViewChild来获取对文件input的引用，然后使用Renderer来调用dispatchEvent来触发事件：

 import { Component, Renderer, ElementRef } from '@angular/core'; @Component({ ... template: ` ... <input #fileInput type="file" id="imgFile" (click)="onChange($event)" > ...` }) class MyComponent { @ViewChild('fileInput') fileInput:ElementRef; constructor(private renderer:Renderer) {} showImageBrowseDlg() { // from http://stackoverflow.com/a/32010791/217408 let event = new MouseEvent('click', {bubbles: true}); this.renderer.invokeElementMethod( this.fileInput.nativeElement, 'dispatchEvent', [event]); } } 

更新

由于直接的DOM访问不会被Angular团队所阻止，所以这个简单的代码也可以被使用

 this.fileInput.nativeElement.click() 

另见https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent

Answer 2

我也想要类似的function，我有一个文件input控制与display:none和一个button控件 ，当我点击button，我想触发点击事件的文件input控制，下面是这样做的代码

 <input type="button" (click)="fileInput.click()" class="btn btn-primary" value="Add From File"> <input type="file" style="display:none;" #fileInput/> 

就这么简单，它的工作完美无瑕。

Answer 3

GünterZöchbauer的答案是正确的。 只要考虑添加以下行：

 showImageBrowseDlg() { // from http://stackoverflow.com/a/32010791/217408 let event = new MouseEvent('click', {bubbles: true}); event.stopPropagation(); this.renderer.invokeElementMethod( this.fileInput.nativeElement, 'dispatchEvent', [event]); } 

在我的情况下，我会得到一个“捕获RangeError：最大调用堆栈大小超过”错误，如果不是。 （我有一个点击和内部input文件的射击发射）