我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在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 https://stackoverflow.com/a/32010791/217408 let event = new MouseEvent('click',{bubbles: true}); this.renderer.invokeElementMethod( this.fileInput.nativeElement,[event]); } }
更新
由于Angular团队不再劝阻直接的DOM访问,所以也可以使用更简单的代码
this.fileInput.nativeElement.click()
参见https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent