详解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 相关文章推荐
js对数字的格式化使用说明
Jan 12 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
js实现文本框选中的方法
May 26 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
php创建图像具体步骤
2017/03/13 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
了解javascript中的Dom操作
2019/05/27 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python使用KNN算法手写体识别
2018/02/01 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python接口测试get请求过程详解
2020/02/28 Python
内勤主管岗位职责
2014/04/03 职场文书
ktv好的活动方案
2014/08/15 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
医院护士工作检讨书
2014/10/26 职场文书
自荐信模板大全
2015/03/27 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
最美乡村教师观后感
2015/06/11 职场文书
电视新闻稿
2015/07/17 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js