详解angular2如何手动点击特定元素上的点击事件

这篇文章主要介绍了详解angular2如何手动点击特定元素上的点击事件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能.

有没有内置的方法来做到这一点？ …..如果不是,请建议我该怎么做

考虑以下代码片段

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

Angular4

代替

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

使用

 this.fileInput.nativeElement.dispatchEvent(event);

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

Angular2

使用 ViewChild 与模板变量来获取对文件输入的引用,然后使用 Renderer 调用dispatchEvent来触发事件：

 import { Component, Renderer, ElementRef } from '@angular/core'; @Component({ ... template: ` ...  ...` }) 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]); } }

更新

由于Angular团队不再劝阻直接的DOM访问,所以也可以使用更简单的代码