详解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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
js选项卡的制作方法
2017/01/23 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
django框架如何集成celery进行开发
2017/05/24 Python
python实现验证码识别功能
2018/06/07 Python
python配置文件写入过程详解
2019/10/19 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
使用Python构造hive insert语句说明
2020/06/06 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python pip如何手动安装二进制包
2020/09/30 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
个人简历自我鉴定
2013/10/11 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
小学班长竞选稿
2015/11/20 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python