详解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里的条件判断
Feb 27 Javascript
Jquery 基础学习笔记之文档处理
May 29 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
Javascript玩转继承(三)
May 08 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
JS之小练习代码
2008/10/12 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vuex实现购物车功能
2020/06/28 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
基于python实现微信模板消息
2015/12/21 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python numpy存取文件的方式
2020/04/01 Python
Python之指数与E记法的区别详解
2019/11/21 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
入学生会自荐书范文
2014/02/05 职场文书
新闻编辑求职信
2014/07/13 职场文书
个人收入证明模板
2014/09/18 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python