详解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 相关文章推荐
重定向实现代码
Nov 20 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
Javascript玩转继承(一)
May 08 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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上传、管理照片示例
2006/10/09 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
PyMongo安装使用笔记
2015/04/27 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 字段拆分详解
2019/12/17 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
python 负数取模运算实例
2020/06/03 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
小学生我的梦想演讲稿
2014/08/21 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
宾馆客房管理制度
2015/08/06 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python