详解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 相关文章推荐
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
详解vue 图片上传功能
Apr 30 Javascript
JavaScript中Dom操作实例详解
Jul 08 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/05/04 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python time模块用法实例详解
2014/09/11 Python
python进行文件对比的方法
2018/12/24 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python