详解angular2如何手动点击特定元素上的点击事件
程序员文章站
2022-06-03 11:57:03
我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jquery .trigger()方法提供的类似功能.
有没有内置的方法来做到这...
我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在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://*.com/a/32010791/217408 let event = new mouseevent('click', {bubbles: true}); this.renderer.invokeelementmethod( this.fileinput.nativeelement, 'dispatchevent', [event]); } }
更新
由于angular团队不再劝阻直接的dom访问,所以也可以使用更简单的代码
this.fileinput.nativeelement.click()
参见 https://developer.mozilla.org/de/docs/web/api/eventtarget/dispatchevent
代码日志版权声明:
翻译自:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: JS调用安卓手机摄像头扫描二维码