详解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 弹出层组件(升级版)
May 12 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
vue动态配置模板 'component is'代码
Jul 04 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
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP精确计算功能示例
2016/11/29 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
投资意向书范本
2014/04/01 职场文书
艺术教育实施方案
2014/05/03 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
唐山大地震的观后感
2015/06/05 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python