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

来源：动视网责编：小采时间：2020-11-27 22:06:02

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

详解angular2如何手动点击特定元素上的点击事件:我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能. 有没有内置的方法来做到这一点？ …..如果不是,请建议我该怎么做考虑以下代码片段 <form [ngFormModel]=i

推荐度：

点击下载本文 文档为doc格式

导读详解angular2如何手动点击特定元素上的点击事件:我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能. 有没有内置的方法来做到这一点？ …..如果不是,请建议我该怎么做考虑以下代码片段 <form [ngFormModel]=i

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

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

考虑以下代码片段

<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上的点击事件

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: `
...
<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]);
 }
}

更新

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