详解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随机展示头像代码
Dec 21 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 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 foreach控制循环次数的实现详解
2013/07/03 PHP
PHP 正则表达式小结
2015/02/12 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python调用staf自动化框架的方法
2018/12/26 Python
python绘制地震散点图
2019/06/18 Python
python urllib爬虫模块使用解析
2019/09/05 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Django使用rest_framework写出API
2020/05/21 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
机关节能减排实施方案
2014/03/17 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis