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


Posted in Javascript onOctober 16, 2018

我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在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访问,所以也可以使用更简单的代码

this.fileInput.nativeElement.click()

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

代码日志版权声明:

翻译自:http://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Vue核心概念Action的总结
Jan 18 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
iView框架问题整理小结
Oct 16 #Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 #Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 #Javascript
ajax与jsonp的区别及用法
Oct 16 #Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 #Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
You might like
具有时效性的php加密解密函数代码
2013/06/19 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
WAF的正确bypass
2017/01/05 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
python概率计算器实例分析
2015/03/25 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
少儿节目主持串词
2014/04/02 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
实践论读书笔记
2015/06/29 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang